Components
Advanced Datepicker

Third-Party Plugins

Tailwind CSS Advanced Datepicker

The Advanced Datepicker component for selecting date and time, ideally combining ease and powerful functionality.

Requires Additional Installation

Note that this component requires the use of the third-party Vanilla Calendar Pro plugin.

Requires JS

Note that this component requires the use of our Advanced Datepicker plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

How to use

Install Vanilla Calendar Pro

Install Vanilla Calendar Pro via npm

Terminal

                      
                        npm i vanilla-calendar-pro

Add Preline CSS for an Advanced Datepicker

Import the Preline UI Datepciker CSS file into your Tailwind CSS file. Here's how the full CSS file should look like:

CSS

                      
                        @import "tailwindcss";
                        
                        /* Preline UI */
                        @import "./node_modules/preline/variants.css";
                        @import "./node_modules/preline/src/plugins/datepicker/styles.css";

                        /* Plugins */
                        @plugin "@tailwindcss/forms";

                        /* Preline Themes */
                        @import "./themes/theme.css";

If you plan to use Preline with utility-based classes, you should replace styles.css with styles-utility.css.

Add the Vanilla Calendar Pro JavaScript

Include the JavaScript <script> near the end of your </body> tag:
<script src="./assets/vendor/lodash/lodash.min.js"></script> <script src="./assets/vendor/vanilla-calendar-pro/index.js"></script>
HTML
```
                      
                    
```
Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

Basic usage

A basic usage of advanced datepicker.

Theme:

Multiple dates

An example showing the ability to select multiple dates.

Theme:

Single pre-set ranges

This example allows to select a range of dates.

Theme:

With time

Datepickers can be customized to select time.

Theme:

Light theme

Datepickers can be customized to use light theme only.

Theme:

<input
                      class="hs-datepicker py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
                      type="text" placeholder="Select day" 
                      readonly
                      data-hs-datepicker='{
                        "applyUtilityClasses": true,
                        "selectionDatesMode": "multiple-ranged",
                        "selectedTheme": "light",
                        "dateMax": "2050-12-31",
                        "layouts": {
                          "default": "<div class=\"--single-month flex flex-col overflow-hidden\"><div class=\"grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3\" data-vc=\"header\"><div class=\"col-span-1\"><#CustomArrowPrev /></div><div class=\"col-span-3 flex justify-center items-center gap-x-1\"><#CustomMonth /><span class=\"text-gray-800\">/</span><#CustomYear /></div><div class=\"col-span-1 flex justify-end\"><#CustomArrowNext /></div></div><div data-vc=\"wrapper\"><div data-vc=\"content\"><#Week /><#Dates /></div></div></div><#CustomTime />"
                        },
                        "mode": "custom-select",
                        "inputModeOptions": {
                          "itemsSeparator": " / "
                        },
                        "templates": {
                          "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                          "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                        }
                      }'>

Ranges

Datepickers can be customized to select ranges.

Theme:

Pre-set ranges

This example allows to select a pre-set range.

Theme:

Ranges with time

Ranges example with dates between start and end dates.

Theme:

Inline

Example of an inline datepicker with range selection and time input.

Theme:

<div class="hs-datepicker py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"
                      data-hs-datepicker='{
                        "applyUtilityClasses": true,
                        "inputMode": false,
                        "type": "multiple",
                        "displayDatesOutside": false,
                        "selectionDatesMode": "multiple-ranged",
                        "displayMonthsCount": 2,
                        "dateMax": "2050-12-31",
                        "layouts": {
                          "multiple": "<div class=\"relative flex flex-col\"><div class=\"absolute top-2 start-2\"><#CustomArrowPrev /></div><div class=\"absolute top-2 end-2\"><#CustomArrowNext /></div><div class=\"sm:flex\" data-vc=\"grid\"><#Multiple><div class=\"p-3 space-y-0.5 --single-month\" data-vc=\"column\"><div class=\"pb-3\" data-vc=\"header\"><div class=\"flex justify-center items-center gap-x-1\" data-vc-header=\"content\"><#CustomMonth /><span class=\"text-foreground\">/</span><#CustomYear /></div></div><div data-vc=\"wrapper\"><div data-vc=\"content\"><#Week /><#Dates /></div></div></div><#/Multiple></div></div><#CustomTime />"
                        },
                        "mode": "custom-select",
                        "inputModeOptions": {
                          "itemsSeparator": " / "
                        },
                        "templates": {
                          "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                          "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                        }
                      }'></div>

Default controls

A grid-based date picker with a structured month and year selection interfaces.

Theme:

Custom styles for selects

Demonstrates how to apply custom styles to advanced select elements.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xs mx-auto mt-4">
                      <input
                      class="hs-datepicker py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"
                      type="text" placeholder="Select day" 
                      readonly
                      data-hs-datepicker='{
                        "applyUtilityClasses": true,
                        "selectionDatesMode": "multiple-ranged",
                        "dateMax": "2050-12-31",
                        "styles": {
                          "customSelect": {
                            "shared": {
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 px-2 flex text-nowrap w-full cursor-pointer bg-layer text-start text-sm focus:outline-hidden focus:opacity-80 before:absolute before:inset-0 before:z-1"
                            },
                            "months": {
                              "toggleClasses": "text-red-600 dark:text-red-500"
                            },
                            "years": {
                              "toggleClasses": "text-blue-600 dark:text-blue-500"
                            },
                            "hours": {
                              "toggleClasses": "pe-6 border border-layer-line rounded-lg text-green-600 dark:text-green-400"
                            },
                            "minutes": {
                              "toggleClasses": "pe-6 border border-layer-line rounded-lg text-yellow-600 dark:text-yellow-400"
                            },
                            "meridiem": {
                              "toggleClasses": "pe-6 border border-layer-line rounded-lg text-purple-600 dark:text-purple-400"
                            }
                          }
                        },
                        "layouts": {
                          "default": "<div class=\"--single-month flex flex-col overflow-hidden\"><div class=\"grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3\" data-vc=\"header\"><div class=\"col-span-1\"><#CustomArrowPrev /></div><div class=\"col-span-3 flex justify-center items-center gap-x-1\"><#CustomMonth /><span class=\"text-foreground\">/</span><#CustomYear /></div><div class=\"col-span-1 flex justify-end\"><#CustomArrowNext /></div></div><div data-vc=\"wrapper\"><div data-vc=\"content\"><#Week /><#Dates /></div></div></div><#CustomTime />"
                        },
                        "mode": "custom-select",
                        "inputModeOptions": {
                          "itemsSeparator": " / "
                        },
                        "templates": {
                          "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                          "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                        }
                      }'>
                      
                        <script src="../assets/vendor/lodash/lodash.min.js"></script>
                        <script src="../assets/vendor/vanilla-calendar-pro/index.js"></script>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.1.3"></script>
                        </body>
                      </html>

<input
                      class="hs-datepicker py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"
                      type="text" placeholder="Select day" 
                      readonly
                      data-hs-datepicker='{
                        "applyUtilityClasses": true,
                        "selectionDatesMode": "multiple-ranged",
                        "dateMax": "2050-12-31",
                        "styles": {
                          "customSelect": {
                            "shared": {
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 px-2 flex text-nowrap w-full cursor-pointer bg-layer text-start text-sm focus:outline-hidden focus:opacity-80 before:absolute before:inset-0 before:z-1"
                            },
                            "months": {
                              "toggleClasses": "text-red-600 dark:text-red-500"
                            },
                            "years": {
                              "toggleClasses": "text-blue-600 dark:text-blue-500"
                            },
                            "hours": {
                              "toggleClasses": "pe-6 border border-layer-line rounded-lg text-green-600 dark:text-green-400"
                            },
                            "minutes": {
                              "toggleClasses": "pe-6 border border-layer-line rounded-lg text-yellow-600 dark:text-yellow-400"
                            },
                            "meridiem": {
                              "toggleClasses": "pe-6 border border-layer-line rounded-lg text-purple-600 dark:text-purple-400"
                            }
                          }
                        },
                        "layouts": {
                          "default": "<div class=\"--single-month flex flex-col overflow-hidden\"><div class=\"grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3\" data-vc=\"header\"><div class=\"col-span-1\"><#CustomArrowPrev /></div><div class=\"col-span-3 flex justify-center items-center gap-x-1\"><#CustomMonth /><span class=\"text-foreground\">/</span><#CustomYear /></div><div class=\"col-span-1 flex justify-end\"><#CustomArrowNext /></div></div><div data-vc=\"wrapper\"><div data-vc=\"content\"><#Week /><#Dates /></div></div></div><#CustomTime />"
                        },
                        "mode": "custom-select",
                        "inputModeOptions": {
                          "itemsSeparator": " / "
                        },
                        "templates": {
                          "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                          "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                        }
                      }'>

An advanced usage with navigation controls for switching between dates or months, and a "Today" button for quick access to the current date.

Theme:

<!DOCTYPE html>
                    <html lang="en" dir="" class="relative min-h-full h-full">
                      <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                        <title>Preline UI</title>
                        <link rel="shortcut icon" href="../favicon.ico">
                        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                        <link rel="stylesheet" href="../assets/css/main.min.css">
                      </head>
                      <body class="w-full mx-auto mt-4">
                    <div class="flex rounded-lg">
                      <input
                        id="hs-datepicker-with-navigation-controls"
                        class="hs-datepicker py-3 px-4 block relative focus:z-1 w-full bg-layer border-layer-line rounded-s-md sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"
                        type="text" placeholder="Select day" 
                        readonly
                        data-hs-datepicker='{
                          "applyUtilityClasses": true,
                          "type": "default",
                          "selectedDates": ["today"],
                          "dateMax": "2050-12-31",
                          "mode": "custom-select",
                          "dateFormat": "D MMMM YYYY, dddd",
                          "replaceTodayWithText": true,
                          "templates": {
                            "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                            "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                          }
                      }'>
                      
   
                      <button id="hs-datepicker-with-navigation-controls-today" type="button" class="relative focus:z-1 -ms-px py-3 px-4 inline-flex justify-center items-center gap-2 bg-layer border border-layer-line font-medium text-layer-foreground shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus transition-all text-sm">
                        Today
                      </button> 
                      <button id="hs-datepicker-with-navigation-controls-prev" type="button" class="relative focus:z-1 -ms-px py-3 px-4 inline-flex justify-center items-center gap-2 bg-layer border border-layer-line font-medium text-layer-foreground shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus transition-all text-sm">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
                      </button>
                      <button id="hs-datepicker-with-navigation-controls-next" type="button" class="relative focus:z-1 -ms-px py-3 px-4 inline-flex justify-center items-center gap-2 rounded-e-md bg-layer border border-layer-line font-medium text-layer-foreground shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus transition-all text-sm">
                        <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                      </button>
                    </div>
                    
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/vanilla-calendar-pro/index.js"></script>
                        <script src="../assets/vendor/preline/dist/index.js?v=4.1.3"></script>
                        <script>
                          window.addEventListener('load', () => requestAnimationFrame(() => {
                            const datepickerInstance = HSDatepicker.getInstance('#hs-datepicker-with-navigation-controls', true);
                            const { element } = datepickerInstance;
                            const vanillaCalendar = element.vanillaCalendar;
                            const todayBtn = document.querySelector('#hs-datepicker-with-navigation-controls-today');
                            const prevBtn = document.querySelector('#hs-datepicker-with-navigation-controls-prev');
                            const nextBtn = document.querySelector('#hs-datepicker-with-navigation-controls-next');
                            const getCurrentDate = () => {
                              if (vanillaCalendar.context && vanillaCalendar.context.selectedDates) {
                                const contextDates = vanillaCalendar.context.selectedDates;

if (contextDates && contextDates.length > 0) {
                                  const dateStr = contextDates[0];

if (dateStr === 'today') {
                                    return new Date();
                                  }

const date = new Date(dateStr);

if (!isNaN(date.getTime())) {
                                    return date;
                                  }
                                }
                              }

const currentState = element.getCurrentState();

if (currentState.selectedDates && currentState.selectedDates.length > 0) {
                                const dateStr = currentState.selectedDates[0];

if (dateStr === 'today') {
                                  return new Date();
                                }

const date = new Date(dateStr);

if (!isNaN(date.getTime())) {
                                  return date;
                                }
                              }

const selectedDates = vanillaCalendar.selectedDates;

if (selectedDates && selectedDates.length > 0) {
                                const dateStr = selectedDates[0];

if (dateStr === 'today') {
                                  return new Date();
                                }

const date = new Date(dateStr);

if (!isNaN(date.getTime())) {
                                  return date;
                                }
                              }

return new Date();
                            };
                            const formatDate = (date) => {
                              if (!date || isNaN(date.getTime())) {
                                return new Date().toISOString().split('T')[0];
                              }

return date.toISOString().split('T')[0];
                            };
                            const updateDate = (selectedDates) => {
                              if (selectedDates.length > 0) {
                                const dateStr = selectedDates[0];
                                const date = new Date(dateStr);
        
                                vanillaCalendar.set({ 
                                  selectedDates: selectedDates,
                                  selectedMonth: date.getMonth(),
                                  selectedYear: date.getFullYear()
                                });
                              } else {
                                vanillaCalendar.set({ selectedDates: selectedDates });
                              }

const inputElement = document.querySelector('#hs-datepicker-with-navigation-controls');

if (inputElement && selectedDates.length > 0) {
                                const dateStr = selectedDates[0];
                                const date = new Date(dateStr);
                                const formattedValue = element.formatDate(date);
                                inputElement.value = formattedValue;
                              }

const changeEvent = new CustomEvent('change', {
                                detail: {
                                  selectedDates: selectedDates,
                                  selectedTime: vanillaCalendar.context.selectedTime,
                                  rest: vanillaCalendar.context
                                }
                              });

inputElement.dispatchEvent(changeEvent);
                            };

todayBtn.addEventListener('click', () => {
                              const today = new Date();
                              const todayStr = today.toISOString().split('T')[0];
                              updateDate([todayStr]);
                            });

prevBtn.addEventListener('click', () => {
                              const currentDate = getCurrentDate();

currentDate.setDate(currentDate.getDate() - 1);

const prevDate = formatDate(currentDate);

updateDate([prevDate]);
                            });

nextBtn.addEventListener('click', () => {
                              const currentDate = getCurrentDate();

currentDate.setDate(currentDate.getDate() + 1);

const nextDate = formatDate(currentDate);

updateDate([nextDate]);
                            });
                          }));
                        </script>
                      </body>
                    </html>

<div class="flex rounded-lg">
                      <input
                        id="hs-datepicker-with-navigation-controls"
                        class="hs-datepicker py-3 px-4 block relative focus:z-1 w-full bg-layer border-layer-line rounded-s-md sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"
                        type="text" placeholder="Select day" 
                        readonly
                        data-hs-datepicker='{
                          "applyUtilityClasses": true,
                          "type": "default",
                          "selectedDates": ["today"],
                          "dateMax": "2050-12-31",
                          "mode": "custom-select",
                          "dateFormat": "D MMMM YYYY, dddd",
                          "replaceTodayWithText": true,
                          "templates": {
                            "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                            "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                          }
                      }'>
                      
   
                      <button id="hs-datepicker-with-navigation-controls-today" type="button" class="relative focus:z-1 -ms-px py-3 px-4 inline-flex justify-center items-center gap-2 bg-layer border border-layer-line font-medium text-layer-foreground shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus transition-all text-sm">
                        Today
                      </button> 
                      <button id="hs-datepicker-with-navigation-controls-prev" type="button" class="relative focus:z-1 -ms-px py-3 px-4 inline-flex justify-center items-center gap-2 bg-layer border border-layer-line font-medium text-layer-foreground shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus transition-all text-sm">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
                      </button>
                      <button id="hs-datepicker-with-navigation-controls-next" type="button" class="relative focus:z-1 -ms-px py-3 px-4 inline-flex justify-center items-center gap-2 rounded-e-md bg-layer border border-layer-line font-medium text-layer-foreground shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus transition-all text-sm">
                        <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                      </button>
                    </div>

if (contextDates && contextDates.length > 0) {
                              const dateStr = contextDates[0];

if (dateStr === 'today') {
                                return new Date();
                              }

const date = new Date(dateStr);

if (!isNaN(date.getTime())) {
                                return date;
                              }
                            }
                          }

const currentState = element.getCurrentState();

if (currentState.selectedDates && currentState.selectedDates.length > 0) {
                            const dateStr = currentState.selectedDates[0];

if (dateStr === 'today') {
                              return new Date();
                            }

const date = new Date(dateStr);

if (!isNaN(date.getTime())) {
                              return date;
                            }
                          }

const selectedDates = vanillaCalendar.selectedDates;

if (selectedDates && selectedDates.length > 0) {
                            const dateStr = selectedDates[0];

if (dateStr === 'today') {
                              return new Date();
                            }

const date = new Date(dateStr);

if (!isNaN(date.getTime())) {
                              return date;
                            }
                          }

return new Date();
                        };
                        const formatDate = (date) => {
                          if (!date || isNaN(date.getTime())) {
                            return new Date().toISOString().split('T')[0];
                          }

return date.toISOString().split('T')[0];
                        };
                        const updateDate = (selectedDates) => {
                          if (selectedDates.length > 0) {
                            const dateStr = selectedDates[0];
                            const date = new Date(dateStr);
        
                            vanillaCalendar.set({ 
                              selectedDates: selectedDates,
                              selectedMonth: date.getMonth(),
                              selectedYear: date.getFullYear()
                            });
                          } else {
                            vanillaCalendar.set({ selectedDates: selectedDates });
                          }

const inputElement = document.querySelector('#hs-datepicker-with-navigation-controls');

if (inputElement && selectedDates.length > 0) {
                            const dateStr = selectedDates[0];
                            const date = new Date(dateStr);
                            const formattedValue = element.formatDate(date);
                            inputElement.value = formattedValue;
                          }

const changeEvent = new CustomEvent('change', {
                            detail: {
                              selectedDates: selectedDates,
                              selectedTime: vanillaCalendar.context.selectedTime,
                              rest: vanillaCalendar.context
                            }
                          });

inputElement.dispatchEvent(changeEvent);
                        };

todayBtn.addEventListener('click', () => {
                          const today = new Date();
                          const todayStr = today.toISOString().split('T')[0];
                          updateDate([todayStr]);
                        });

prevBtn.addEventListener('click', () => {
                          const currentDate = getCurrentDate();

currentDate.setDate(currentDate.getDate() - 1);

const prevDate = formatDate(currentDate);

updateDate([prevDate]);
                        });

nextBtn.addEventListener('click', () => {
                          const currentDate = getCurrentDate();

currentDate.setDate(currentDate.getDate() + 1);

const nextDate = formatDate(currentDate);

updateDate([nextDate]);
                        });
                      }));
                    </script>

Datepickers that are inside the modal.

Theme:

<div id="hs-modal-example" class="hs-overlay hidden size-full fixed top-0 start-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-modal-example-label">
                        <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                          <div class="flex flex-col bg-overlay border border-overlay-line shadow-2xs rounded-xl pointer-events-auto">
                            <div class="flex justify-between items-center py-3 px-4 border-b border-overlay-header">
                              <h3 id="hs-modal-example-label" class="font-semibold text-foreground">
                                Modal example
                              </h3>
                              <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-modal-example">
                                <span class="sr-only">Close</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              </button>
                            </div>
                            <div class="p-4 min-h-70 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                              <div class="grid grid-cols-2 gap-x-4">
                                <div>
                                  
                                  <input class="hs-datepicker py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="text" placeholder="Select day" readonly="" data-hs-datepicker='{
                                    "applyUtilityClasses": true,
                                    "type": "default",
                                    "selectionDatesMode": "multiple",
                                    "dateMax": "2050-12-31",
                                    "mode": "custom-select",
                                    "styles": {
                                      "calendar": "z-80"
                                    },
                                    "templates": {
                                      "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                                      "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                                    }
                                  }'>
                                  
                                </div>
                                <div>
                                  
                                  <input class="hs-datepicker py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="text" placeholder="Select day" readonly="" data-hs-datepicker='{
                                    "selectionDatesMode": "multiple-ranged",
                                    "dateMax": "2050-12-31",
                                    "layouts": {
                                      "default": "<div class=\"--single-month flex flex-col overflow-hidden dark:bg-neutral-900 dark:border-neutral-700\"><div class=\"grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3\" data-vc=\"header\"><div class=\"col-span-1\"><#CustomArrowPrev /></div><div class=\"col-span-3 flex justify-center items-center gap-x-1\"><#CustomMonth /><span class=\"text-foreground\">/</span><#CustomYear /></div><div class=\"col-span-1 flex justify-end\"><#CustomArrowNext /></div></div><div data-vc=\"wrapper\"><div data-vc=\"content\"><#Week /><#Dates /></div></div></div><#CustomTime />"
                                    },
                                    "mode": "custom-select",
                                    "inputModeOptions": {
                                      "itemsSeparator": " / "
                                    },
                                    "styles": {
                                      "calendar": "z-80"
                                    },
                                    "templates": {
                                      "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                                      "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                                    }
                                  }'>
                                  
                                </div>
                              </div>
                            </div>
                            <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-overlay-footer">
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-modal-example">
                                Close
                              </button>
                              <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                Save changes
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                        <script src="../assets/vendor/lodash/lodash.min.js"></script>
                        <script src="../assets/vendor/vanilla-calendar-pro/index.js"></script>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.1.3"></script>
                        </body>
                      </html>

<div class="flex justify-center">
                        
                        <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-modal-example" data-hs-overlay="#hs-modal-example">
                          Open modal
                        </button>
                        
                      </div>

Destroy/Reinitialize Datepicker

Provides destroy method that helps to destroy a datepicker.

Theme:

<div class="flex flex-wrap gap-2 mt-84">
                        <button type="button" id="hs-destroy-datepicker" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          Destroy datepicker
                        </button>
                        <button type="button" id="hs-reinit-datepicker" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                          Reinitialize datepicker
                        </button>
                      </div>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/vanilla-calendar-pro/index.js"></script>
                        <script src="../assets/vendor/preline/dist/index.js?v=4.1.3"></script>
                        <script>
                          window.addEventListener('load', () => requestAnimationFrame(() => {
                            const destroyBtn = document.querySelector('#hs-destroy-datepicker');
                            const reinitBtn = document.querySelector('#hs-reinit-datepicker');
    
                            destroyBtn.addEventListener('click', () => {
                              const { element } = HSDatepicker.getInstance('#hs-datepicker-temporary', true);

element.destroy();

destroyBtn.setAttribute('disabled', 'disabled');
                              reinitBtn.removeAttribute('disabled');
                            });

reinitBtn.addEventListener('click', () => {
                              HSDatepicker.autoInit();

reinitBtn.setAttribute('disabled', 'disabled');
                              destroyBtn.removeAttribute('disabled');
                            });
                          }));
                        </script>
                      </body>
                    </html>

<input
                        id="hs-datepicker-temporary"
                        class="hs-datepicker py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"
                        type="text" placeholder="Select day" 
                        readonly
                        data-hs-datepicker='{
                          "applyUtilityClasses": true,
                          "type": "default",
                          "dateMax": "2050-12-31",
                          "mode": "custom-select",
                          "templates": {
                            "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
                            "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
                          }
                      }'>

element.destroy();

destroyBtn.setAttribute('disabled', 'disabled');
                          reinitBtn.removeAttribute('disabled');
                        });

reinitBtn.addEventListener('click', () => {
                          HSDatepicker.autoInit();

reinitBtn.setAttribute('disabled', 'disabled');
                          destroyBtn.removeAttribute('disabled');
                        });
                      }));
                    </script>

Tailwind CSS Advanced Datepicker

Requires Additional Installation

Requires JS

How to use

Install Vanilla Calendar Pro

Add Preline CSS for an Advanced Datepicker

Add the Vanilla Calendar Pro JavaScript

Basic usage

Multiple dates

Single pre-set ranges

With time

Light theme

Ranges

Pre-set ranges

Ranges with time

Inline

Default controls

Custom styles for selects

With navigation controls

Destroy/Reinitialize Datepicker

On this page