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?
2 Answers
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>
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.
Related