Docs
Third-Party Plugins
Datepicker JavaScript Plugin

Tailwind CSS Datepicker JavaScript Plugin

Build functional Tailwind CSS datepickers with Preline UI, including single dates, ranges, time selection, inline calendars, presets, and JavaScript methods.

Requires Additional Installation

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

Learn more

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

Installation

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";

                            /* 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 datepicker

Use the advanced datepicker as a standard single-date picker.

Multiple date selection

Enable selection of multiple dates in the same calendar.

Single-calendar preset ranges

Provide preset ranges while keeping the selection inside a single calendar view.

Date and time

Extend the picker with time selection alongside the chosen date.

Forced light theme

Force the calendar UI to use its light theme regardless of the surrounding page 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>"
                            }
                          }'>

Date range picker

Configure the datepicker to select a start and end date as a range.

Preset ranges

Offer predefined ranges for quick selection alongside manual date-range picking.

Date range with time

Combine date-range selection with time inputs for both start and end values.

Inline datepicker

Render the calendar inline instead of inside a popover, with range and time controls visible.

<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 inset-s-2\"><#CustomArrowPrev /></div><div class=\"absolute top-2 inset-e-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 calendar controls

Use the built-in month and year controls provided by the calendar.

Custom select styling

Apply custom styles to the month and year select controls inside the calendar.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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>"
                            }
                          }'>

Add previous, next, and Today controls for quicker calendar navigation.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" 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.2.0"></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>

Use the advanced datepicker inside a modal without changing the interaction pattern.

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

<div id="hs-modal-example" class="hs-overlay hidden size-full fixed top-0 inset-s-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>

Destroy and reinitialize

Use the destroy method to remove a datepicker instance, then initialize it again when needed.

<div class="flex flex-wrap gap-2 mt-100">
                            <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.2.0"></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>

Install Vanilla Calendar Pro

Add Preline CSS for an Advanced Datepicker

Add the Vanilla Calendar Pro JavaScript