Datepicker

Pages

Users

Robert De Niro

robertdeniro@left4code.com

Russell Crowe

russellcrowe@left4code.com

Johnny Depp

johnnydepp@left4code.com

Charlize Theron

charlizetheron@left4code.com

Products

Notifications

Robert De Niro

01:10 PM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Russell Crowe

06:05 AM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Johnny Depp

05:09 AM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Charlize Theron

01:10 PM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Brad Pitt

05:09 AM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Basic Date Picker

Show code

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

Input Group

Show 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"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Time Picker

Show code

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

Date Range Picker

Show code

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

Modal Date Picker

Show 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 relative 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 mt-5 absolute w-40 top-0 right-0 z-20"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"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput class="datepicker input w-full border mt-2"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" 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