third party plugins
Tailwind CSS Flatpickr (Datepicker)
Flatpickr is a lightweight JavaScript library for easy date and time picking, offering sleek design and extensive customization options for web applications.
Below are the steps to seamlessly integrate Flatpickr JS into your project.
Basic date picker example.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD" id="flatpickr-date" /><script>
window.addEventListener('load', function () {
// Basic
flatpickr('#flatpickr-date', {
monthSelectorType: 'static'
})
})
</script>Basic time picker example.
<input type="text" class="input max-w-sm" placeholder="HH:MM" id="flatpickr-time" /><script>
window.addEventListener('load', function () {
// Time
flatpickr('#flatpickr-time', {
enableTime: true,
noCalendar: true,
dateFormat: 'H:i'
})
})
</script>Default datepicker.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD" id="flatpickr-default" /><script>
window.addEventListener('load', function () {
// Default Type
flatpickr('#flatpickr-default', {
monthSelectorType: 'static'
})
})
</script>Floating label example.
<div class="input-floating max-w-sm">
<input type="text" placeholder="YYYY-MM-DD" class="input" id="flatpickr-floating" />
<label class="input-floating-label" for="flatpickr-floating">Date</label>
</div><script>
window.addEventListener('load', function () {
// floating Type
flatpickr('#flatpickr-floating', {
monthSelectorType: 'static'
})
})
</script>Success state can be show using is-valid class.
Helper text
Helper text
<div class="max-w-sm">
<label class="label-text" for="flatpickrStateSuccess">Date</label>
<input type="text" placeholder="YYYY-MM-DD" class="input is-valid flatpickr-success" id="flatpickrStateSuccess" />
<span class="helper-text">Helper text</span>
</div>
<div class="input-floating max-w-sm">
<input type="text" placeholder="YYYY-MM-DD" class="input is-valid flatpickr-success" id="flatpickrFloatingStateSuccess" />
<label class="input-floating-label" for="flatpickrFloatingStateSuccess">Date</label>
<span class="helper-text ps-3">Helper text</span>
</div><script>
window.addEventListener('load', function () {
// Success Date Picker
flatpickr('.flatpickr-success', {
monthSelectorType: 'static'
})
})
</script>Error state can be show using is-invalid class.
Helper text
Helper text
<div class="max-w-sm">
<label class="label-text" for="flatpickrStateError">Date</label>
<input type="text" placeholder="John Doe" class="input is-invalid flatpickr-error" id="flatpickrStateError" />
<span class="helper-text">Helper text</span>
</div>
<div class="input-floating max-w-sm">
<input type="text" placeholder="John Doe" class="input is-invalid flatpickr-error" id="flatpickrFloatingStateError" />
<label class="input-floating-label" for="flatpickrFloatingStateError">Date</label>
<span class="helper-text ps-3">Helper text</span>
</div><script>
window.addEventListener('load', function () {
// Error Date Picker
flatpickr('.flatpickr-error', {
monthSelectorType: 'static'
})
})
</script>Example showcasing a picker with both date and time selection.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-date-time" /><script>
window.addEventListener('load', function () {
// Date Time
flatpickr('#flatpickr-date-time', {
enableTime: true,
dateFormat: 'Y-m-d H:i'
})
})
</script>Example demonstrating how to select multiple dates.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD, YYYY-MM-DD" id="flatpickr-multiple-date" /><script>
window.addEventListener('load', function () {
// Multiple Date
flatpickr('#flatpickr-multiple-date', {
mode: 'multiple',
dateFormat: 'Y-m-d'
})
})
</script>Select range of date.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" /><script>
window.addEventListener('load', function () {
// Range Date Picker
flatpickr('#flatpickr-range', {
mode: 'range'
})
})
</script>Human Friendly date picker example.
<input type="text" class="input max-w-sm" placeholder="Month DD, YYYY" id="flatpickr-human-friendly" /><script>
window.addEventListener('load', function () {
// Human Friendly
flatpickr('#flatpickr-human-friendly', {
altInput: true,
altFormat: 'F j, Y',
dateFormat: 'Y-m-d'
})
})
</script>Basic inline picker example.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD" id="flatpickr-inline" /><script>
window.addEventListener('load', function () {
// Inline Date Picker
flatpickr('#flatpickr-inline', {
inline: true,
allowInput: false,
monthSelectorType: 'static'
})
})
</script>The example below demonstrates how to disable a specific date range.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD" id="flatpickr-disabled-range" /><script>
window.addEventListener('load', function () {
// Disable Date Picker
const fromDate = new Date(Date.now() - 3600 * 1000 * 48)
const toDate = new Date(Date.now() + 3600 * 1000 * 48)
flatpickr('#flatpickr-disabled-range', {
dateFormat: 'Y-m-d',
disable: [
{
from: fromDate.toISOString().split('T')[0],
to: toDate.toISOString().split('T')[0]
}
]
})
})
</script>The date picker below has been localized to display months and days in Russian. For more information, please refer to the official documentation on localization.
<input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD" id="flatpickr-localization" /><script>
window.addEventListener('load', function () {
// Localization
flatpickr('#flatpickr-localization', {
locale: 'ru'
})
})
</script><input type="text" class="input max-w-sm" placeholder="YYYY-MM-DD" id="flatpickr-week-number" /><script>
window.addEventListener('load', function () {
// Week Numbers
flatpickr('#flatpickr-week-number', {
weekNumbers: true,
monthSelectorType: 'static'
})
})
</script>