Rubick
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Angelina Jolie
angelinajolie@left4code.com
Sylvester Stallone
sylvesterstallone@left4code.com
Kevin Spacey
kevinspacey@left4code.com
Johnny Depp
johnnydepp@left4code.com
Products
Nikon Z6
Photography
Nike Tanjun
Sport & Outdoor
Oppo Find X2 Pro
Smartphone & Tablet
Dell XPS 13
PC & Laptop

## Datepicker

## Basic Date Picker

Show example code

      HTMLOpenTaginput type="text" class="datepicker form-control w-56 block mx-auto" data-single-mode="true"HTMLCloseTag

## Input Group

Show example code

      HTMLOpenTagdiv class="relative w-56 mx-auto"HTMLCloseTag HTMLOpenTagdiv class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400"HTMLCloseTag HTMLOpenTagi data-lucide="calendar" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="datepicker form-control pl-12" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Date Range Picker

Show example code

      HTMLOpenTaginput type="text" data-daterange="true" class="datepicker form-control w-56 block mx-auto"HTMLCloseTag

## Modal Date Picker

Show example code
Show Modal

## Filter by Date

From
To

      HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#datepicker-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Show Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="datepicker-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Header --HTMLCloseTag HTMLOpenTagdiv class="modal-header"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagFilter by DateHTMLOpenTag/h2HTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-secondary hidden sm:flex"HTMLCloseTag HTMLOpenTagi data-lucide="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown sm:hidden"HTMLCloseTag HTMLOpenTaga class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false"HTMLCloseTag HTMLOpenTagi data-lucide="more-horizontal" class="w-5 h-5 text-slate-500"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="javascript:;" class="dropdown-content"HTMLCloseTag HTMLOpenTagi data-lucide="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Header --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Body --HTMLCloseTag HTMLOpenTagdiv class="modal-body grid grid-cols-12 gap-4 gap-y-3"HTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabel for="modal-datepicker-1" class="form-label"HTMLCloseTagFromHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" id="modal-datepicker-1" class="datepicker form-control" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabel for="modal-datepicker-2" class="form-label"HTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" id="modal-datepicker-2" class="datepicker form-control" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Body --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Footer --HTMLCloseTag HTMLOpenTagdiv class="modal-footer text-right"HTMLCloseTag HTMLOpenTagbutton type="button" data-tw-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-primary w-20"HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Footer --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

Dark Mode