Date Picker

Lightweight, powerful javascript datetimepicker with no dependencies.

Documentation for Flatpickr

Date Picker

<label class="form-label" for="datepicker">Start Date</label>
<input class="form-control datetimepicker" id="datepicker" type="text" placeholder="d/m/y" data-options='{"disableMobile":true}' />

Time Picker

<label class="form-label" for="timepicker1">Start Time</label>
<input class="form-control datetimepicker" id="timepicker1" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />

Date Time Picker

<label class="form-label" for="datetimepicker">Start Date</label>
<input class="form-control datetimepicker" id="datetimepicker" type="text" placeholder="d/m/y H:i" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":true}' />

Range

<label class="form-label" for="timepicker2">Select Time Range</label>
<input class="form-control datetimepicker" id="timepicker2" type="text" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true}' />

Stylesheet

<pre><code class="language-html">&lt;link href=&quot;vendors/flatpickr/flatpickr.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
<link href="vendors/flatpickr/flatpickr.min.css" rel="stylesheet" />

Javascript

<pre><code class="language-html">&lt;script src=&quot;assets/js/flatpickr.js&quot;&gt;&lt;/script&gt;</code></pre>
<script src="assets/js/flatpickr.js"></script>