Date Picker

Lightweight, powerful javascript datetime picker 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="dd/mm/yyyy" data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}' />

Time Picker

<label class="form-label" for="timepicker1">Start Time</label>

<input class="form-control datetimepicker" id="timepicker1" type="text" placeholder="hour : minute" 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="dd/mm/yyyy hour : minute" 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>

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.9.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize