Datepicker

Basic Date Picker

Show example code

  HTMLOpenTaginput class="datepicker input w-56 border 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-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4"HTMLCloseTag HTMLOpenTagi data-feather="calendar" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="datepicker input pl-12 border" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Date Range Picker

Show example code

  HTMLOpenTaginput data-daterange="true" class="datepicker input w-56 border block mx-auto"HTMLCloseTag

Modal Date Picker

Show example code

Show Modal

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#datepicker-modal-preview" class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal" id="datepicker-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagFilter by DateHTMLOpenTag/h2HTMLCloseTag HTMLOpenTagbutton class="button border items-center text-gray-700 hidden sm:flex"HTMLCloseTag HTMLOpenTagi data-feather="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:;"HTMLCloseTag HTMLOpenTagi data-feather="more-horizontal" class="w-5 h-5 text-gray-700 dark:text-gray-600"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="dropdown-box w-40"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1 p-2"HTMLCloseTag HTMLOpenTaga href="javascript:;" class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-5 grid grid-cols-12 gap-4 row-gap-3"HTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagFromHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput class="datepicker input w-full border mt-2" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput class="datepicker input w-full border mt-2" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"HTMLCloseTag HTMLOpenTagbutton type="button" data-dismiss="modal" class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="button w-20 bg-theme-1 text-white"HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag