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.

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 minDatemaxDateenable 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:

RECOMMENDED POSTS

FEATURE POSTS