### Date Picker

Lightweight, powerful javascript datetimepicker with no dependencies.

Flatpickr documentation

##### Stylesheet

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

##### Javascript

    <script src="vendors/flatpickr/flatpickr.min.js"></script>

##### Date Picker

Start Date

    <label class="form-label" for="datepicker">Start Date</label>
    <input class="form-control datetimepicker" id="datepicker" type="text" placeholder="dd/mm/yy" data-options='{"disableMobile":true}' />

##### Time Picker

Start Time

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

##### Date & Time Picker

Start Date

    <label class="form-label" for="datetimepicker">Start Date</label>
    <input class="form-control datetimepicker" id="datetimepicker" type="text" placeholder="dd/mm/yy HH:ii" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":true}' />

##### Range

Select Date Range

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

##### Predefined Ranges

Select Date Range

##### How it Works:

##### Basic

- Pass `"predefinedRanges":true` through `data-options` attribute to apply the default preset ranges.

      "predefinedRanges":true

##### Customize Default Ranges

- Provide the default ranges ID in the `predefinedRanges` as an array if you would want a specific set of default preset ranges.

      "predefinedRanges":["today", "last_7_days"]

  Available default predefined IDs are `today,` `last_month,` `this_month,` `last_7_days,` `last_30_days`

- Simply provide your own label as the value and the ID as the key of an object in the `predefinedRanges` array to alter the default preset ranges label text.

      "predefinedRanges":["today", {"last_7_days": "Last week"}]

##### Add Custom Ranges

- Provide the `label` and `range` as an object as an element of the `predefinedRanges` array if you would want your own custom preset ranges.

      "predefinedRanges": [
      "today",
      {"last_7_days": "Last week"},
      {"label": "My Days", "range": ["2023-10-10", "2023-11-10"]}
      ]

    <label class="form-label" for="timepicker3">Select Date Range</label>
    <input class="form-control mb-5 datetimepicker" id="timepicker3" type="text" placeholder="dd/mm/yy to dd/mm/yy" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true,"position":"below","predefinedRanges":["today",{"last_7_days":"Last week"},"last_month",{"label":"My Days","range":["2023-10-10","2025-11-10T06:09:07.924Z"]}]}' />
    <h5 class="mb-4">How it Works:</h5>
    <h5 class="fs-9">Basic</h5>
    <ul class="mb-4">
      <li>
        <p>Pass <code>"predefinedRanges":true </code>through <code>data-options </code>attribute to apply the default preset ranges.
        <pre class="scrollbar mt-2"><code class="language-js">&quot;predefinedRanges&quot;:true</code></pre>
        </p>
      </li>
    </ul>
    <h5 class="fs-9 mb-2">Customize Default Ranges</h5>
    <ul>
      <li class="mb-3">
        <p>Provide the default ranges ID in the <code>predefinedRanges </code>as an array if you would want a specific set of default preset ranges.</p>
        <pre class="scrollbar mt-2"><code class="language-js">&quot;predefinedRanges&quot;:[&quot;today&quot;, &quot;last_7_days&quot;]</code></pre><span class="fs-10 fst-italic mb-3">Available default predefined IDs are <code>today, </code><code>last_month, </code><code>this_month, </code><code>last_7_days, </code><code>last_30_days </code></span>
      </li>
      <li>
        <p>Simply provide your own label as the value and the ID as the key of an object in the <code>predefinedRanges </code> array to alter the default preset ranges label text.</p>
        <pre class="scrollbar mt-2 mb-2"><code class="language-js">&quot;predefinedRanges&quot;:[&quot;today&quot;, {&quot;last_7_days&quot;: &quot;Last week&quot;}]</code></pre>
      </li>
    </ul>
    <h5 class="fs-9 mb-2">Add Custom Ranges</h5>
    <ul>
      <li class="mb-3">
        <p>Provide the <code>label </code>and <code>range </code>as an object as an element of the <code>predefinedRanges </code>array if you would want your own custom preset ranges.</p>
        <pre class="scrollbar mt-2 mb-2"><code class="language-js">&quot;predefinedRanges&quot;: [
    &quot;today&quot;,
    {&quot;last_7_days&quot;: &quot;Last week&quot;},
    {&quot;label&quot;: &quot;My Days&quot;, &quot;range&quot;: [&quot;2023-10-10&quot;, &quot;2023-11-10&quot;]}
    ]</code></pre>
      </li>
    </ul>

##### Validation

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

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

    <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="dd/mm/yy" 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>

##### Localization

Flatpickr can be localized per-instance, or globally. To localize flatpickr import language script in `src/js/flatpickr.js.`For example, you can use Bangla language by importing the following script

    import "flatpickr/dist/l10n/bn.js"

For more details visit Flatpickr localization documentation.

##### Example

Select Time Range

    <div class="mb-3">
      <label class="form-label" for="timepicker4">Select Time Range</label>
      <input class="form-control datetimepicker" id="timepicker4" type="text" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true,"locale":"bn"}' />
    </div>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize