JavaScript提示框自定义输入

Question

我希望在JavaScript的提示对话框中有一个类似这样的字段，以便用户可以快速选择日期。

那个输入框应该长这样

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

- Max Mustermann

---

提示对话框无法修改。但是，您可以创建自己的提示对话框并使用类型为“date”的输入；请注意，一些浏览器不符合新的html5输入类型。 - Pierre

datepicker 的外观在不同浏览器中会有所不同。 Prompt对话框中是否意味着以某种弹出形式呈现？您无法在JavaScript的任何本机模态对话框中直接包含HTML元素-您需要构建自己的模态框或使用jQuery或其他工具。 - Professor Abronsius

不可以设置js-prompt-Dialog的输入类型。如果您希望，可以添加自定义对话框并在其中放置一个输入日期元素（例如jquery-ui Dialog https://jqueryui.com/dialog/）。 - chriss

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的变量中。

安装说明： 要快速开始，请在HTML开头包含此脚本。请参阅：安装说明

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

- DenverCoder1

Answer 2

如果我理解您的需求，我认为您可以使用jQuery日期选择器https://jqueryui.com/datepicker/#default

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

源代码位于页面底部。

- Simon

---

感谢您的快速回复。但是，我需要在JavaScript中使用提示输入对话框。 - Max Mustermann