Tailwind CSS Datepicker Plugin API

Installation

To get started, install Datepicker plugin via npm, else you can skip this step if you are already using Preline UI as a package.

1. Install the plugin

   Install @preline/datepicker via npm

   Terminal

                             
                               npm i @preline/select @preline/datepicker
                             
                           

2. Add the plugin CSS

   Use @source to register the plugin's JavaScript path for Tailwind CSS scanning, then @import the plugin's CSS files into your Tailwind CSS file.

   main.css

                             
                               @import "tailwindcss";
   
                               /* @preline/select */
                               /* [!code highlight:2] */
                               @source "../node_modules/@preline/select/*.js";
                               @import "./node_modules/@preline/select/variants.css";
   
                               /* @preline/datepicker */
                               /* [!code highlight:3] */
                               @source "../node_modules/@preline/datepicker/*.js";
                               @import "./node_modules/@preline/datepicker/variants.css";
                               @import "./node_modules/@preline/datepicker/styles.css";
   
                               /* [!code highlight:1] */
                               @import "./node_modules/@preline/datepicker/theme.css";
                             
                           

   main.css

                             
                               @import "tailwindcss";
   
                               /* @preline/select */
                               /* [!code highlight:3] */
                               @source "../node_modules/@preline/select/*.js";
                               @import "./node_modules/@preline/select/variants.css";
                               @import "./node_modules/@preline/select/theme.css";
   
                               /* @preline/datepicker */
                               /* [!code highlight:3] */
                               @source "../node_modules/@preline/datepicker/*.js";
                               @import "./node_modules/@preline/datepicker/variants.css";
                               @import "./node_modules/@preline/datepicker/styles-utility.css";
                             
                           

   Use styles.css together with theme.css for the default themed appearance. Use styles-utility.css instead when you plan to style the datepicker entirely with Tailwind utility classes, in this case theme.css is not needed. @preline/select is required for styling the embedded select dropdowns used in custom-select mode.

3. Add the plugin JavaScript

   Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

   HTML

   <script src="./node_modules/@preline/datepicker/index.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

   HTML (non-auto)

   <script type="module"> // [!code highlight:3] import HSDatepicker from "@preline/datepicker/non-auto.mjs"; new HSDatepicker(document.querySelector("#datepicker")); </script>

   ---

   Via bundler

   When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module. vanilla-calendar-pro and the Advanced Select plugin are bundled inside @preline/datepicker - no separate imports needed.

   JavaScript (auto)

                             
                               import "@preline/datepicker";
                             
                           

   JavaScript (non-auto)

                             
                               import HSDatepicker from "@preline/datepicker/non-auto";
   
                               HSDatepicker.autoInit();
   
                               // Or initialize a specific element manually
                               const el = document.querySelector("#datepicker");
                               if (el) new HSDatepicker(el);
                             
                           

Example

Here is a basic example of a datepicker.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

Tailwind Modifiers

Methods

The HSDatepicker object is contained within the global window object

                      
                        const form = document.querySelector('#subscription-form');

                        form.addEventListener('submit', (evt) => {
                          evt.preventDefault();

                          const { element } = HSDatepicker.getInstance('#datepicker', true);
                          const { selectedDates, selectedTime } = element.getCurrentState();

                          const formData = new FormData(event.target);
                          const serializedData = Object.fromEntries(formData.entries());
                          serializedData.selectedDates = selectedDates;
                          serializedData.selectedTime = selectedTime;
                          
                          fetch('/submit', {
                            method: 'POST',
                            headers: {
                              'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(serializedData)
                          })
                            .then((response) => response.json())
                            .then((data) => {
                              console.log('Success:', data);
                            })
                            .catch((error) => {
                              console.error('Error:', error);
                            });
                        });
                      
                    

Events

{
  selectedDates: string;
  selectedTime: string;
  rest: Object;
}

                      
                        const { element } = HSDatepicker.getInstance('#datepicker', true);

                        element.on('change', (data) => {...});
                      
                    

Actions

                      
                        const datepicker = new HSDatepicker(document.querySelector('#datepicker'), {
                          onClickArrow: () => {
                            alert('Arrow clicked!');
                          }
                        });
                      
                    

Ready to use Components

Advanced Datepicker

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Advanced Datepicker examples