Datepicker

Midone

Pages

Mail Settings

Users & Permissions

Transactions Report

Users

Russell Crowe

russellcrowe@left4code.com

Denzel Washington

denzelwashington@left4code.com

Leonardo DiCaprio

leonardodicaprio@left4code.com

Keanu Reeves

keanureeves@left4code.com

Products

Sony Master Series A9G

Samsung Galaxy S20 Ultra

Smartphone & Tablet

Basic Date Picker

Show example code

                                      <input class="datepicker form-control w-56 block mx-auto" data-single-mode="true"> 
                                

Input Group

Show example code

                                      <div class="relative w-56 mx-auto">
     <div 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"> <i data-feather="calendar" class="w-4 h-4"></i> </div> <input type="text" class="datepicker form-control pl-12" data-single-mode="true">
 </div> 
                                

Date Range Picker

Show example code

                                      <input data-daterange="true" class="datepicker form-control w-56 block mx-auto"> 
                                

Modal Date Picker

Show example code

Show Modal

                                      <!-- BEGIN: Show Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-toggle="modal" data-target="#datepicker-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Show Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="datepicker-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <!-- BEGIN: Modal Header -->
             <div class="modal-header">
                 <h2 class="font-medium text-base mr-auto">Filter by Date</h2> <button class="btn btn-outline-secondary hidden sm:flex"> <i data-feather="file" class="w-4 h-4 mr-2"></i> Download Docs </button>
                 <div class="dropdown sm:hidden"> <a class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false"> <i data-feather="more-horizontal" class="w-5 h-5 text-gray-600 dark:text-gray-600"></i> </a>
                     <div class="dropdown-menu w-40">
                         <div class="dropdown-menu__content box dark:bg-dark-1 p-2"> <a 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"> <i data-feather="file" class="w-4 h-4 mr-2"></i> Download Docs </a> </div>
                     </div>
                 </div>
             </div> <!-- END: Modal Header -->
             <!-- BEGIN: Modal Body -->
             <div class="modal-body grid grid-cols-12 gap-4 gap-y-3">
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-datepicker-1" class="form-label">From</label> <input id="modal-datepicker-1" class="datepicker form-control" data-single-mode="true"> </div>
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-datepicker-2" class="form-label">To</label> <input id="modal-datepicker-2" class="datepicker form-control" data-single-mode="true"> </div>
             </div> <!-- END: Modal Body -->
             <!-- BEGIN: Modal Footer -->
             <div class="modal-footer text-right"> <button type="button" data-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1">Cancel</button> <button type="button" class="btn btn-primary w-20">Submit</button> </div> <!-- END: Modal Footer -->
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                

Dark Mode