Third-party plugins
DatePicker
Flatpickr is a lightweight JavaScript library for easy date and time picking, offering sleek design and extensive customization options for web applications.
Getting started
Setup
Below are the steps to seamlessly integrate <a href="https://flatpickr.js.org/" target="_blank" class="link link-primary">Flatpickr</a> JS into your project.
<head>
<link rel="stylesheet" href="../path/to/flatpickr/dist/flatpickr.css" />
</head>
<body>
<script src="../path/to/flatpickr/flatpickr.js"></script>
</body>JavaScript
// If using Flatpickr in a framework, it's recommended to pass the element directly
flatpickr(element, {});
// Alternatively, selectors are supported
flatpickr("#myID", {});
// Create multiple instances
flatpickr(".anotherSelector");Basic examples
Date picker
Basic date picker example.
Time picker
Basic time picker example.
Types
Default
Default datepicker.
Floating
Floating label example.
Validation states
Success state
Success state can be show using `is-valid` class.
Error state
Error state can be show using `is-invalid` class.
Illustrations
DateTime picker
Example showcasing a picker with both date and time selection.
Multiple dates picker
Example demonstrating how to select multiple dates.
Range picker
Select range of date.
Human friendly
Human Friendly date picker example.
Inline picker
Basic inline picker example.
Disabled dates
The example below demonstrates how to disable a specific date range.
Localization
The date picker below has been localized to display months and days in Russian. For more information, please refer to the official documentation on <a href="https://flatpickr.js.org/localization/" target="_blank" class="link link-primary">localization</a>.
Display week numbers
Example displaying week number.