Javascript 提示对话框自定义输入

Question

I want to have a field like this in the prompt-dialog in javascript, so the user can quickly select a date

That input field should look like this

Is there an easy way to do this?

Answer 1

You can do very customized things with Sweet Alert .

Example with date input:

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;
  }
})

The result of running this will be a popup in the center of the screen with a date input box:

The selected date will be stored in the variable called formValue .

Installation instructions

To get started quickly, you can include this script at the beginning of the HTML:

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

Answer 2

If I understand your needs I think you can use jQuery datepicker https://jqueryui.com/datepicker/#default

if you want the calendar to be inline you can do that too https://jqueryui.com/datepicker/#inline

The source code is at the bottom of the pages.