DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
        }
    ]
}

Enter fullscreen mode Exit fullscreen mode

Preloading range dates

{
    mode: "range",
    dateFormat: "Y-m-d",
    defaultDate: ["2024-02-10", "2016-02-20"]
}
Enter fullscreen mode Exit fullscreen mode

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: Laravel 10 Datatable Date Range Filter using AJAX

Top comments (0)