Date Range Calendar in Flatpickr Example
Hello, developers! Today, let's explore how to implement a Date Range Calendar in your web applications using Flatpickr. Flatpickr is a lightweight and customizable JavaScript date picker library, and the best part? We're going to keep things simple by using CDN (Content Delivery Network) files.
In this article, I'll give a step-by-step guide for the date range calendar in flatpickr in laravel 8, laravel 9, laravel 10, and PHP.
So, let's see the date range calendar in flatpickr example, flatpickr date range, how to set date range in datepicker, how to set date range in flatpickr, date range picker laravel 8/9/10.
First things first, make sure Flatpickr is included in your project. You can either download it or use the CDN. For simplicity, let's go with the CDN:
<!-- Include Flatpickr CSS and JS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Add an input field to your HTML file with a class that you'll use for initializing Flatpickr:
<input type="text" class="date-range-picker" placeholder="Select Date Range">
Create an HTML file (e.g., index.html) and include the necessary CDN links for Flatpickr:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Range Calendar with Flatpickr</title>
<!-- Flatpickr CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.css">
<!-- Flatpickr JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.js"></script>
</head>
<body>
<input type="text" class="date-range-picker" placeholder="Select Date Range">
<script>
// Initialize Flatpickr
flatpickr('.date-range-picker', {
mode: 'range',
dateFormat: 'Y-m-d',
});
</script>
</body>
</html>
Note that disabled dates (by either minDate, maxDate, enable or disable) will not be allowed in selections.
{
mode: "range",
minDate: "today",
dateFormat: "Y-m-d",
disable: [
function(date) {
// disable every multiple of 8
return !(date.getDate() % 8);
}
]
}
Preloading range dates
{
mode: "range",
dateFormat: "Y-m-d",
defaultDate: ["2024-02-10", "2016-02-20"]
}
And there you have it! In just a few simple steps, we've integrated a Date Range Calendar into our web application using Flatpickr with CDN files.
You might also like:
- Read Also: Bootstrap Date Range Picker Example
- Read Also: How to Disable Dates in Flatpickr Example
- Read Also: How To Export CSV Data With Date Range Filter PHP
- Read Also: Laravel 10 Datatable Date Range Filter using AJAX
