Javascript提示对话框自定义输入

Question

我想在 javascript 的提示对话框中有这样的字段，以便用户可以快速 select 一个日期

该输入字段应如下所示

有没有简单的方法来做到这一点？

Answer 1

您可以使用 Sweet Alert 进行非常个性化的操作。

日期输入示例：

const {
  value: formValue
} = await Swal.fire({
  title: 'Select a date',
  html: '<input type="date" id="swal-input" class="swal2-input">',
  focusConfirm: false,
  allowOutsideClick: false,
  preConfirm: () => {
    return document.getElementById('swal-input').value;
  }
})

运行的结果是在屏幕中央弹出一个日期输入框：

所选日期将存储在名为 formValue 的变量中。

Installation instructions

为了快速入门，您可以在 HTML 的开头包含此脚本：

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Answer 2

如果我了解您的需求，我想您可以使用 jQuery datepicker https://jqueryui.com/datepicker/#default

如果您希望内联日历，您也可以这样做 https://jqueryui.com/datepicker/#inline

源代码在页面底部。

Javascript提示对话框自定义输入

Javascript Prompt dialog customize input

html

javascript

prompt

您可以使用 Sweet Alert 进行非常个性化的操作。

Installation instructions