Date Picker
Lightweight, powerful javascript datetimepicker with no dependencies.
Flatpickr documentationStylesheet
<link href="vendors/flatpickr/flatpickr.min.css" rel="stylesheet" />Javascript
<script src="vendors/flatpickr/flatpickr.min.js"></script>Date Picker
<label class="form-label" for="datepicker">Start Date</label>
<input class="form-control datetimepicker" id="datepicker" type="text" placeholder="dd/mm/yy" 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="dd/mm/yy HH:ii" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":true}' />Range
<label class="form-label" for="timepicker2">Select Date Range</label>
<input class="form-control datetimepicker" id="timepicker2" type="text" placeholder="dd/mm/yy to dd/mm/yy" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true}' />Predefined Ranges
How it Works:
Basic
-
Pass
"predefinedRanges":truethroughdata-optionsattribute to apply the default preset ranges."predefinedRanges":true
Customize Default Ranges
-
Provide the default ranges ID in the
predefinedRangesas an array if you would want a specific set of default preset ranges.
Available default predefined IDs are"predefinedRanges":["today", "last_7_days"]today,last_month,this_month,last_7_days,last_30_days -
Simply provide your own label as the value and the ID as the key of an object in the
predefinedRangesarray to alter the default preset ranges label text."predefinedRanges":["today", {"last_7_days": "Last week"}]
Add Custom Ranges
-
Provide the
labelandrangeas an object as an element of thepredefinedRangesarray if you would want your own custom preset ranges."predefinedRanges": [ "today", {"last_7_days": "Last week"}, {"label": "My Days", "range": ["2023-10-10", "2023-11-10"]} ]
<label class="form-label" for="timepicker3">Select Date Range</label>
<input class="form-control mb-5 datetimepicker" id="timepicker3" type="text" placeholder="dd/mm/yy to dd/mm/yy" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true,"position":"below","predefinedRanges":["today",{"last_7_days":"Last week"},"last_month",{"label":"My Days","range":["2023-10-10","2024-09-02T09:48:49.148Z"]}]}' />
<h5 class="mb-4">How it Works:</h5>
<h5 class="fs-9">Basic</h5>
<ul class="mb-4">
<li>
<p>Pass <code>"predefinedRanges":true </code>through <code>data-options </code>attribute to apply the default preset ranges.
<pre class="scrollbar mt-2"><code class="language-js">"predefinedRanges":true</code></pre>
</p>
</li>
</ul>
<h5 class="fs-9 mb-2">Customize Default Ranges</h5>
<ul>
<li class="mb-3">
<p>Provide the default ranges ID in the <code>predefinedRanges </code>as an array if you would want a specific set of default preset ranges.</p><pre class="scrollbar mt-2"><code class="language-js">"predefinedRanges":["today", "last_7_days"]</code></pre><span class="fs-10 fst-italic mb-3">Available default predefined IDs are <code>today, </code><code>last_month, </code><code>this_month, </code><code>last_7_days, </code><code>last_30_days </code></span>
</li>
<li>
<p>Simply provide your own label as the value and the ID as the key of an object in the <code>predefinedRanges </code> array to alter the default preset ranges label text.</p><pre class="scrollbar mt-2 mb-2"><code class="language-js">"predefinedRanges":["today", {"last_7_days": "Last week"}]</code></pre>
</li>
</ul>
<h5 class="fs-9 mb-2">Add Custom Ranges</h5>
<ul>
<li class="mb-3">
<p>Provide the <code>label </code>and <code>range </code>as an object as an element of the <code>predefinedRanges </code>array if you would want your own custom preset ranges.</p><pre class="scrollbar mt-2 mb-2"><code class="language-js">"predefinedRanges": [
"today",
{"last_7_days": "Last week"},
{"label": "My Days", "range": ["2023-10-10", "2023-11-10"]}
]</code></pre>
</li>
</ul>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="dd/mm/yy" 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>Localization
Flatpickr can be localized per-instance, or globally. To localize flatpickr import language script in src/js/flatpickr.js.For example, you can use Bangla language by importing the following script
import "flatpickr/dist/l10n/bn.js"For more details visit Flatpickr localization documentation.
Example
<div class="mb-3">
<label class="form-label" for="timepicker4">Select Time Range</label>
<input class="form-control datetimepicker" id="timepicker4" type="text" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true,"locale":"bn"}' />
</div>
