Date Picker
Lightweight, powerful javascript datetimepicker with no dependencies.
Flatpickr documentationStylesheet
<link href="vendors/flatpickr/flatpickr.min.css" rel="stylesheet" />Javascript
<script src="assets/js/flatpickr.js"></script>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}' />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="datepicker"> Date</label>
<input class="form-control datetimepicker" id="datepicker" 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="datetimepicker">Date & Time</label>
<input class="form-control datetimepicker" id="datetimepicker" 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="timepicker3">Select Time Range</label>
<input class="form-control datetimepicker" id="timepicker3" type="text" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true,"locale":"bn"}' />
</div>
