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}' />

Validation

Pass "allowInput":true through data-options attribute to apply the form validation.

<form class="needs-validation" novalidate="novalidate">
  <div class="mb-3"><label class="form-label" for="datepickerVal"> Date</label><input class="form-control datetimepicker" id="datepickerVal" type="text" placeholder="d/m/y" required="required" data-options='{"disableMobile":true,"allowInput":true}' />
    <div class="invalid-feedback">This field is required</div>
  </div>
  <div class="mb-3"><label class="form-label" for="dateTimepickerVal">Date & Time</label><input class="form-control datetimepicker" id="dateTimepickerVal" type="text" required="required" placeholder="d/m/y H:i" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":true,"allowInput":true}' />
    <div class="invalid-feedback">This field is required</div>
  </div><button class="btn btn-primary" type="submit">Submit form</button>
</form>
This field is required
This field is required

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;vendors/flatpickr/flatpickr.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<script src="vendors/flatpickr/flatpickr.min.js"></script>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.16.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

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