## Date Picker

Lightweight, powerful javascript datetime picker with no dependencies.

Documentation for Flatpickr

#### Date Picker

    <label class="form-label" for="datepicker">Start Date</label>

    <input class="form-control datetimepicker" id="datepicker" type="text" placeholder="dd/mm/yyyy" data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}' />

Start Date

#### Time Picker

    <label class="form-label" for="timepicker1">Start Time</label>

    <input class="form-control datetimepicker" id="timepicker1" type="text" placeholder="hour : minute" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />

Start Time

#### Date Time Picker

    <label class="form-label" for="datetimepicker">Start Date</label>

    <input class="form-control datetimepicker" id="datetimepicker" type="text" placeholder="dd/mm/yyyy hour : minute" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":true}' />

Start Date

#### Range

    <label class="form-label" for="timepicker2">Select Time Range</label>

    <input class="form-control datetimepicker" id="timepicker2" type="text" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true}' />

Select Time Range

#### Validation

Pass `"allowInput":true` through `data-options` attribute to apply the form validation.

    <form class="needs-validation" novalidate="novalidate">
      <div class="mb-3">
        <label class="form-label" for="datepickerVal"> Date</label>
        <input class="form-control datetimepicker" id="datepickerVal" type="text" placeholder="d/m/y" required="required" data-options='{"disableMobile":true,"allowInput":true}' />
        <div class="invalid-feedback">This field is required</div>
      </div>
      <div class="mb-3">
        <label class="form-label" for="dateTimepickerVal">Date & Time</label>
        <input class="form-control datetimepicker" id="dateTimepickerVal" type="text" required="required" placeholder="d/m/y H:i" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":true,"allowInput":true}' />
        <div class="invalid-feedback">This field is required</div>
      </div>
      <button class="btn btn-primary" type="submit">Submit form</button>
    </form>

Date
This field is required
Date & Time
This field is required

#### Stylesheet

    <pre><code class="language-html">&lt;link href=&quot;vendors/flatpickr/flatpickr.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>

    <link href="vendors/flatpickr/flatpickr.min.css" rel="stylesheet" />

#### Javascript

    <pre><code class="language-html">&lt;script src=&quot;assets/js/flatpickr.js&quot;&gt;&lt;/script&gt;</code></pre>

    <script src="assets/js/flatpickr.js"></script>

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize