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.
Step 1: Setting Up Flatpickr
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>
Step 2: Create an HTML Input Element
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">
Example
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:
Top comments (0)