JS Date Picker in <dialog>
Anyone know of a JS date picker component/widget that works in the <dialog> element?
FlatPickr and AirPicker all fail as the calendar is rendered outside of the top layer.
3 Replies
how about
<input type="date">?The issue with Flatpickr, AirPicker, and similar components is that they often append their calendar dropdown to the document body, which ignores the <dialog>'s top layer positioning, causing them to display outside of it.
Flatpickr has a appendTo option to set the parent element of the calendar dropdown. Instead of the body, try appending it to the dialog itself:
flatpickr(".your-input", {
appendTo: document.querySelector("dialog"),
// other options
});
This should help keep it inside the dialog if you specify the <dialog> element directly.
OR (TRY THIS)
Custom CSS with position: relative; on <dialog>:
For any picker, you could add position: relative; to the <dialog> itself, giving it a new context, and setting the date pickerβs container position as absolute.
actually, do not do it to the dialog itself
add a wrapper and then set it to the wrapper
but the correct way is what he said: configure the parent element for the datepickers inside the dialog