Date Picker Widget
Build a simple month-view date picker that populates an input and is accessible via keyboard.
jQuery
Intermediate
4 min read
Date Picker
Example
// Simple date picker with Flatpickr + jQuery
import flatpickr from "flatpickr";
$(".datepicker").each(function() {
flatpickr(this, {
dateFormat: "Y-m-d",
minDate: "today",
onChange: (dates, dateStr) => {
$(this).closest("form").find("[name=formatted_date]").val(
new Date(dateStr).toLocaleDateString("en-GB", { day:"numeric",month:"long",year:"numeric" })
);
}
});
}); Pro Tip
Use native where UX is acceptable — it is zero-JS, accessible, and mobile-native.