1. Components
  2. Datepicker

Components

Tailwind CSS Datepicker

The Datepicker component integrates a date input field with a calendar popover, offering a seamless way for users to input or select specific date and time values. It simplifies scheduling and event planning within applications.

Heads up!

Please note, this component primarily demonstrates the User Interface (UI) flow and does not include functional JavaScript features.

Single datepicker

The calendar allows the user to select a date by clicking on the desired day and month.

/
Mo Tu We Th Fr Sa Su

Single pre-set ranges

This example allows to select a range of dates.

/
Mo Tu We Th Fr Sa Su

With time

Datepickers can be customized to select time.

/
Mo Tu We Th Fr Sa Su
:

Ranges

Datepickers can be customized to select ranges.

/
Mo Tu We Th Fr Sa Su
/
Mo Tu We Th Fr Sa Su

Pre-set ranges

This example allows to select a pre-set range.

/
Mo Tu We Th Fr Sa Su
/
Mo Tu We Th Fr Sa Su
20.07.2023 - 10.08.2023

Ranges with time

Ranges example with dates between start and end dates.

/
Mo Tu We Th Fr Sa Su
:
/
Mo Tu We Th Fr Sa Su
:
-

With date-range list

Display a date-range list.

/
Mo Tu We Th Fr Sa Su
/
Mo Tu We Th Fr Sa Su