Datepicker

Basic Date Picker

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

Input Group

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

Date Range Picker

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

Modal Date Picker

            
                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-black/60 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.5 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.5 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.5 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 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 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