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

<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

<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

<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>
<!-- javascript for init -->

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

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