DateTimePicker v4.17.47

We have created the design of the date-time picker made by Flatpickr. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.

For more information please check Full Github Documentation.

Here is a coded example:

Single Date

Copy
<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
    </div>
    <input class="flatpickr flatpickr-input form-control" type="text" placeholder="Select Date..">
  </div>
</div>

Date range

Copy
<div class="input-daterange">
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
        </div>
        <input class="flatpickr range form-control" type="text" placeholder="Range">
      </div>
    </div>
</div>

Datetimepicker

Copy
<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
    </div>
    <input class="flatpickr datetimepicker form-control" type="text" placeholder="Datetimepicker">
  </div>
</div>
Copy
<!-- javascript for init -->

<!-- Datepicker -->
flatpickr('.flatpickr', {});

<!-- Datepicker - range -->
flatpickr('.range', {
  mode: "range"
});
<!-- DateTimePicker -->
flatpickr('.datetimepicker', {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
});