Date & timePRO

Choose a date or time in a user-friendly, styleful way. Powered by Flatpickr.

Optional plugin

As this plugin is a non-Bootstrap JavaScript plugin, it should be considered as an optional extension and be removed when not in use, in order to improve page load times. Instructions on how to deal with plugins can be found here.

The fancy way to pick a date or time. Automatically activated on page load by the .datepick and .timepick classes on the <input> elements. 


<div class="form-group">
	<label for="datepick">Example date picker</label>
	<input type="text" class="form-control datepick" placeholder=" Choose date" data-dtp="dtp_M1G1A">
</div>
<div class="form-group">
	<label for="timepick">Example time picker</label>
	<input type="text" class="form-control timepick" placeholder=" Choose time" data-dtp="dtp_0fpms">
</div>

JavaScript behavior

Aside from the default initialization on the .datepick and .timepick classes, you may create custom date & time pickers with a variety of options such as disabled dates, ranges, and more. Initialize a custom date or time picker as follows:


/* Initializes flatpickr timepicker */
$('#your-datepicker').flatpickr({
	time: false
});
/* Initializes flatpickr datepicker */
$('#your-timepicker').flatpickr({
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true
});

Options, methods & events

For the full list of options, methods and events related to this plugin, visit the Flatpickr documentation.

Read more

Collapse Dropdowns