Datepicker

Pages

Users

Denzel Washington

denzelwashington@left4code.com

Angelina Jolie

angelinajolie@left4code.com

Arnold Schwarzenegger

arnoldschwarzenegger@left4code.com

Morgan Freeman

morganfreeman@left4code.com

Products

Samsung Galaxy S20 Ultra

Sony Master Series A9G

Electronic

Notifications

Denzel Washington

06:05 AM

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

Angelina Jolie

05:09 AM

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

Arnold Schwarzenegger

06:05 AM

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

Morgan Freeman

01:10 PM

Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Kevin Spacey

05:09 AM

Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Basic Date Picker

Show code

                                        <input class="datepicker input w-56 border block mx-auto">
                                    

Input Group

Show 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"> <i data-feather="calendar" class="w-4 h-4"></i> </div> <input type="text" class="datepicker input pl-12 border">
</div>
                                    

Time Picker

Show code

                                        <input data-timepicker="true" class="datepicker input w-56 border block mx-auto">
                                    

Date Range Picker

Show code

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

Modal Date Picker

Show code

Show Modal

                                        <div class="text-center"> <a href="javascript:;" data-toggle="modal" data-target="#datepicker-modal-preview" class="button inline-block bg-theme-1 text-white">Show Modal</a> </div>
<div class="modal" id="datepicker-modal-preview">
    <div class="modal__content">
        <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200">
            <h2 class="font-medium text-base mr-auto">Filter by Date</h2> <button class="button border items-center text-gray-700 hidden sm:flex"> <i data-feather="file" class="w-4 h-4 mr-2"></i> Download Docs </button>
            <div class="dropdown relative sm:hidden"> <a class="dropdown-toggle w-5 h-5 block" href="javascript:;"> <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700"></i> </a>
                <div class="dropdown-box mt-5 absolute w-40 top-0 right-0 z-20">
                    <div class="dropdown-box__content box p-2"> <a href="javascript:;" class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="file" class="w-4 h-4 mr-2"></i> Download Docs </a> </div>
                </div>
            </div>
        </div>
        <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
            <div class="col-span-12 sm:col-span-6"> <label>From</label> <input class="datepicker input w-full border mt-2"> </div>
            <div class="col-span-12 sm:col-span-6"> <label>To</label> <input class="datepicker input w-full border mt-2"> </div>
        </div>
        <div class="px-5 py-3 text-right border-t border-gray-200"> <button type="button" class="button w-20 border text-gray-700 mr-1">Cancel</button> <button type="button" class="button w-20 bg-theme-1 text-white">Submit</button> </div>
    </div>
</div>
                                    