Tailwind CSS Datepicker

Datepicker JavaScript plugin.

Installation

To get started, install Vanilla Calendar Pro and Lodash plugin via npm with Preline UI's Datepicker plugin, you may skip Preline UI's plugin installation step if you are already using Preline UI as a package.

                      
                        npm i vanilla-calendar-pro lodash @preline/datepicker

Example

Here is a basic example of a datepicker.

Basic usage

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

JavaScript behavior

Data Options

Vanilla Calendar Pro

Please note that this component requires the use of the Vanilla Calendar Pro plugin. Most options available in the plugin are available in our wrapper.

Check Options

Name	Description	Options	Default value
`data-hs-datepicker`	Activate a Datepicker by specifying on an element. Should be added to the element itself.	—	—
`:mode`	This option allows you to specify the operational mode of the datepicker. It determines how the datepicker behaves and displays its interface. Examples of possible values include: `default` standard layout, provided by the Vanilla Calendar Pro `custom-select` activates custom select inputs for months, years and time elements	"default" \| "custom-select"	`default`
`:inputModeOptions.dateSeparator`	Specifies the character used to separate the year, month, and day in the date format displayed in the input field. E.g. `/` produces a date format like `2024/01/22`	string	`.`
`:inputModeOptions.itemsSeparator`	pecifies the character or string used to separate multiple date entries in the input field when multiple dates are selected. E.g. `\|` produces a format like `2024-01-22 \| 2024-01-23`	string	`,`
`:styles.customSelect.shared`	Defines shared styling configurations for Advanced Custom Select components. These styles are consistently applied to all instances of the Advanced Custom Select within the wrapper, ensuring a unified and cohesive appearance.	Advanced Select Options	—
`:styles.customSelect.months`	Defines additional styling configurations specifically for the "months" instance of the Advanced Custom Select. These options are combined with the `styles.customSelect.shared` settings, allowing you to customize the appearance of the "months" component while maintaining consistency with the shared styles.	Advanced Select Options	—
`:styles.customSelect.years`	Defines additional styling configurations specifically for the "months" instance of the Advanced Custom Select. These options are combined with the `styles.customSelect.shared` settings, allowing you to customize the appearance of the "years" component while maintaining consistency with the shared styles.	Advanced Select Options	—
`:styles.customSelect.hours`	Defines additional styling configurations specifically for the "hours" instance of the Advanced Custom Select. These options are combined with the `styles.customSelect.shared` settings, allowing you to customize the appearance of the "hours" component while maintaining consistency with the shared styles.	Advanced Select Options	—
`:styles.customSelect.minutes`	Defines additional styling configurations specifically for the "minutes" instance of the Advanced Custom Select. These options are combined with the `styles.customSelect.shared` settings, allowing you to customize the appearance of the "minutes" component while maintaining consistency with the shared styles.	Advanced Select Options	—
`:styles.customSelect.meridiem`	Defines additional styling configurations specifically for the "meridiem" instance of the Advanced Custom Select. These options are combined with the `styles.customSelect.shared` settings, allowing you to customize the appearance of the "meridiem" component while maintaining consistency with the shared styles.	Advanced Select Options	—
`:templates.time`	allows to define a custom HTML template for rendering the time selection interface within the datepicker.	string	—
`:templates.arrowPrev`	allows to define a custom HTML template for the "previous" navigation arrow in the datepicker.	string	—
`:templates.arrowNext`	allows to define a custom HTML template for the "next" navigation arrow in the datepicker.	string	—

Tailwind Modifiers

Name	Description
`hs-vc-date-today:*`	A modifier that applies Tailwind classes to the current date (marked as "today") using the attribute `data-vc-date-today`.
`hs-vc-date-selected:*`	A modifier that applies Tailwind classes to the selected dates using the attribute `data-vc-date-selected`.
`hs-vc-date-weekend:*`	A modifier that applies Tailwind classes to weekend dates using the attribute `data-vc-date-weekend`.
`hs-vc-week-day-off:*`	A modifier that applies Tailwind classes to weekdays marked as "day off" using the attribute `data-vc-week-day-off`.
`hs-vc-date-month-prev:*`	A modifier that applies Tailwind classes to dates belonging to the previous month using the class `data-vc-date-month="prev"`.
`hs-vc-date-month-next:*`	A modifier that applies Tailwind classes to dates belonging to the next month using the attribute `data-vc-date-month="next"`.
`hs-vc-calendar-selected-middle:*`	A modifier that applies Tailwind classes to dates that are in the middle of a selected range using the attribute `data-vc-date-selected="middle"`.
`hs-vc-calendar-selected-first:*`	A modifier that applies Tailwind classes to the first date in a selected range using the attribute `data-vc-date-selected="first"`.
`hs-vc-calendar-selected-last:*`	A modifier that applies Tailwind classes to the last date in a selected range using the attribute `data-vc-date-selected="last"`.
`hs-vc-months-month-selected:*`	A modifier that applies Tailwind classes to the currently selected month using the attribute `data-vc-months-month-selected`.
`hs-vc-years-year-selected:*`	A modifier that applies Tailwind classes to the currently selected year using the attribute `data-vc-years-year-selected`.

Methods

Vanilla Calendar Pro

Please note that this component requires the use of the Vanilla Calendar Pro plugin. Most methods available in the plugin are available in our wrapper.

Check Methods

The HSDatepicker object is contained within the global window object

Method	Description
Public methods
`getCurrentState()`	Returns an object containing the following details: `selectedDates`: an array of currently selected dates in the datepicker `selectedTime`: the currently selected time, if the time selection is enabled This method is useful for accessing the current selections made by the user, allowing integration with other components or further processing based on the selected values.
Static methods
`HSDatepicker.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Get current state.

                      
                        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

Method	Description	Returning value
`on:change`	Called when one or more dates are selected.	`{ selectedDates: string; selectedTime: string; rest: Object; }`

When select changes event example.

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

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

Actions

Vanilla Calendar Pro

Please note that this component requires the use of the Vanilla Calendar Pro plugin. Most actions available in the plugin are available in our wrapper.

Check Actions

When change month arrow was clicked.

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

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Components

Tailwind CSS Datepicker

Vanilla Calendar Pro

Vanilla Calendar Pro

Vanilla Calendar Pro

On this page