Date / time picker
A lightweight and powerful date / time picker component.
The Date / time picker component is powered by the Flatpickr plugin. To use this component, ensure to include the required reference to the plugin's .css and .js files.
CSS file is linked in the <head> section and above theme.min.css reference in your document:
<link rel="stylesheet" href="assets/vendor/flatpickr/dist/flatpickr.min.css">JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/flatpickr/dist/flatpickr.min.js"></script>For date range feature, be sure to add as well:
<script src="assets/vendor/flatpickr/dist/plugins/rangePlugin.js"></script>You can alter date / time picker behavior by specifying options within the data-datepicker="{}" attribute.
Usefull links:
Date picker
<!-- Date picker: Y-m-d default date format -->
<label for="date-1" class="form-label">Choose date</label>
<div class="position-relative">
<input type="text" class="form-control form-icon-end" id="date-1" data-datepicker placeholder="Choose date">
<i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>
<!-- Date picker: F j, Y date format -->
<label for="date-2" class="form-label">Choose date</label>
<div class="position-relative">
<input type="text" class="form-control form-icon-end" id="date-2" data-datepicker='{"dateFormat": "F j, Y"}' placeholder="Choose date">
<i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>
<!-- Date picker: M J, y date format -->
<label for="date-3" class="form-label">Choose date</label>
<div class="position-relative">
<input type="text" class="form-control form-icon-end" id="date-3" data-datepicker='{"dateFormat": "M J, y"}' placeholder="Choose date">
<i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>Time picker
<!-- Time picker (12-hour format) -->
<label for="time-12" class="form-label">Choose time</label>
<div class="position-relative">
<input type="text" class="form-control form-icon-end" id="time-12" data-datepicker='{
"enableTime": true,
"noCalendar": true,
"dateFormat": "h:i K"
}' placeholder="Choose time">
<i class="fi-clock position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>
<!-- Time picker (24-hour format) -->
<label for="time-24" class="form-label">Choose time</label>
<div class="position-relative">
<input type="text" class="form-control form-icon-end" id="time-24" data-datepicker='{
"enableTime": true,
"noCalendar": true,
"dateFormat": "H:i",
"time_24hr": true
}' placeholder="Choose time">
<i class="fi-clock position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>Date and time picker
<!-- Date and time picker -->
<label for="date-time" class="form-label">Choose date and time</label>
<div class="position-relative">
<input type="text" class="form-control form-icon-end" id="date-time" data-datepicker='{
"enableTime": true,
"dateFormat": "F j, Y H:i"
}' placeholder="Choose date and time">
<i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>Min and default dates
<!-- Date picker with set minimum and default day to "today" -->
<label for="min-default-dates" class="form-label">Choose date</label>
<div class="position-relative">
<input type="text" class="form-control form-icon-end" id="min-default-dates" data-datepicker='{
"dateFormat": "F j, Y",
"defaultDate": "today",
"minDate": "today"
}' placeholder="Choose date">
<i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>Date range
<!-- Slider with fade transition between slides -->
<label class="form-label">Date range</label>
<div class="input-group">
<span class="input-group-text">
<i class="fi-calendar fs-base"></i>
</span>
<input type="text" class="form-control" data-datepicker='{"dateFormat": "F j, Y", "linkedInput": "#end-date"}' placeholder="From date">
<input type="text" class="form-control" data-datepicker='{"dateFormat": "F j, Y"}' id="end-date" placeholder="To date">
</div>