Javascript Prompt dialog customize input

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>