How to use

flatpickr is a lightweight and powerful datetime picker.

<!-- HTML -->
<input type="text" class="form-control f-basic flatpickr-input" placeholder="Select Date.." readonly="readonly">

<!-- JavaScript -->
<script type="module">
	import flatpickr from "flatpickr";
	import "flatpickr/dist/flatpickr.css";

	$(".f-basic").flatpickr({
		enableTime: true,
		dateFormat: "Y-m-d H:i",
	});
</script>

Human-friendly Dates

altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a Y-m-d... string, while the altInput will display the date in a more legible, customizable format.

Enabling this option is highly recommended.

Disabling dates

If you’d like to make certain dates unavailable for selection, there are multiple methods of doing so.

• Disabling specific date
• Disabling a date range
• Disabling dates using a function

All of those are possible with the disable option