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 >
	$(".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

Template Setting
Set Theme Color
Template Layouts
Icon Border Stroke
Layout Section Ligh/Dark
More App Setting