The "Basic Datepicker" component allows users to select dates from a calendar. It is a fundamental input element in many web applications, especially in forms that require users to input or select dates.
HTMLOpenTaginput
data-tw-merge
type="text" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker mx-auto block w-56 mx-auto block w-56 datepicker mx-auto block w-56 mx-auto block w-56"
HTMLCloseTag
The "Basic Datepicker" component using Litepicker provides a user-friendly way to select dates for your web application. It's highly configurable and easy to integrate into your projects.
The "Input Group" component combines an input field with a calendar icon and a datepicker to facilitate date selection in your web application. This component is useful for improving the user experience when inputting dates in forms.
HTMLOpenTagdiv class="relative mx-auto w-56"HTMLCloseTag
HTMLOpenTagdiv
class="absolute flex h-full w-10 items-center justify-center rounded-l border bg-slate-100 text-slate-500 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400"HTMLCloseTag
HTMLOpenTagi
data-tw-merge
data-lucide="calendar"
class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTaginput
data-tw-merge
type="text" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker pl-12 pl-12 datepicker pl-12 pl-12"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
The "Input Group Datepicker" component provides an elegant and user-friendly way to select dates in your web application. By combining an input field with a calendar icon and Litepicker, users can easily input dates, making your forms more intuitive and accessible.
The "Date Range Picker" component allows users to select a date range in your web application. This component is useful for scenarios where you need to collect date ranges, such as booking systems or date-based filtering.
HTMLOpenTaginput
data-tw-merge
type="text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker mx-auto block w-56 mx-auto block w-56 datepicker mx-auto block w-56 mx-auto block w-56"
HTMLCloseTag
The "Date Range Picker" component enhances your web application by providing an easy and intuitive way for users to select date ranges. Whether you're building a booking system or implementing date-based filtering, this component streamlines the process of collecting date ranges, making your application more user-friendly and efficient.
The "Modal Datepicker" component combines the functionality of a datepicker with a modal window, allowing users to select dates within a modal interface. This component is useful for scenarios where you want to provide a focused and distraction-free date selection experience.
HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag
HTMLOpenTagdiv class="text-center"HTMLCloseTag
HTMLOpenTaga
data-tw-merge
data-tw-toggle="modal" data-tw-target="#datepicker-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Show Modal Toggle --HTMLCloseTag
HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag
HTMLOpenTagdiv
data-tw-backdrop=""
aria-hidden="true"
tabindex="-1"
id="datepicker-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
data-tw-merge
class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTag!-- BEGIN: Modal Header --HTMLCloseTag
HTMLOpenTagdiv
class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400"
HTMLCloseTagHTMLOpenTagh2 class="mr-auto text-base font-medium"HTMLCloseTag
Filter by Date
HTMLOpenTag/h2HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 hidden sm:flex hidden sm:flex"
HTMLCloseTagHTMLOpenTagi
data-tw-merge
data-lucide="file"
class="stroke-[1] w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
Download DocsHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTagdiv
data-tw-merge
data-tw-placement="bottom-end"
class="dropdown relative sm:hidden"
HTMLCloseTagHTMLOpenTaga
data-tw-toggle="dropdown"
aria-expanded="false"
href="javascript:;" class="cursor-pointer block h-5 w-5"
HTMLCloseTagHTMLOpenTagi
data-tw-merge
data-lucide="more-horizontal"
class="stroke-[1] w-5 h-5 h-5 w-5 text-slate-500 h-5 w-5 text-slate-500"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
HTMLOpenTag/aHTMLCloseTag
HTMLOpenTagdiv
data-transition
data-selector=".show"
data-enter="transition-all ease-linear duration-150"
data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
data-enter-to="!mt-1 visible opacity-100 translate-y-0"
data-leave="transition-all ease-linear duration-150"
data-leave-from="!mt-1 visible opacity-100 translate-y-0"
data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
class="dropdown-menu absolute z-[9999] hidden"
HTMLCloseTagHTMLOpenTagdiv
data-tw-merge
class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
HTMLCloseTag
HTMLOpenTaga
class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
HTMLCloseTagHTMLOpenTagi
data-tw-merge
data-lucide="file"
class="stroke-[1] w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
Download DocsHTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Modal Header --HTMLCloseTag
HTMLOpenTag!-- BEGIN: Modal Body --HTMLCloseTag
HTMLOpenTagdiv
data-tw-merge
class="p-5 grid grid-cols-12 gap-4 gap-y-3"
HTMLCloseTagHTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="modal-datepicker-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
From
HTMLOpenTag/labelHTMLCloseTag
HTMLOpenTaginput
data-tw-merge
type="text" id="modal-datepicker-1" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker datepicker"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="modal-datepicker-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
To
HTMLOpenTag/labelHTMLCloseTag
HTMLOpenTaginput
data-tw-merge
type="text" id="modal-datepicker-2" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker datepicker"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Modal Body --HTMLCloseTag
HTMLOpenTag!-- BEGIN: Modal Footer --HTMLCloseTag
HTMLOpenTagdiv
class="px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400 text-right"
HTMLCloseTagHTMLOpenTagbutton
data-tw-merge
data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 mr-1 w-20 mr-1 w-20"
HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-20 w-20"
HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Modal Footer --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: Modal Content --HTMLCloseTag
The "Modal Datepicker" component combines the convenience of a datepicker with the user-friendly experience of a modal window. This integration provides a clean and organized way for users to select dates in your web application, making it ideal for date-based filtering or any scenario where date selection is required.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
Prop | Type | Description |
---|---|---|
`options` | `LitepickerConfig` | Litepicker configuration options. |
`value` | `string` | The value of the Litepicker input. |
`onChange` | `(date: string) => void` | A callback function that is called when the Litepicker input value changes. |
`getRef` | `(el: LitepickerElement) => void` | A function that receives a reference to the Litepicker input element. |