Sneat Dashboard FREE by ThemeSelection

Picker

We are using different kinds of components for date & time picker which are Flatpickr, Bootstrap datepicker, Bootstrap daterange picker, jQuery timepicker and Pickr (color picker).

Read the official Flatpickr, Bootstrap daterange picker, jQuery timepicker, Pickr Documentations for a full list of instructions and other options.

Flatpickr

Flatpickr is a lightweight, powerful javascript datetimepicker with no dependencies

Usage

In order to use flatpickr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/flatpickr/flatpickr.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

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

Datepicker

Use YOUR_ELEMENT.flatpickr() to create a basic datepicker

Date Picker

<div class="mb-3">
  <label for="flatpickr-date" class="form-label">Date Picker</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-date" />
</div>

var flatpickrDate = document.querySelector("#flatpickr-date");

flatpickrDate.flatpickr({
  monthSelectorType: "static",
  static: true
});

Timepicker

If you want to create a timepicker, add these parameters with your initialization: {enableTime: true, noCalendar: true}.

Time Picker

<div class="mb-3">
  <label for="flatpickr-time" class="form-label">Time Picker</label>
  <input type="text" class="form-control" placeholder="HH:MM" id="flatpickr-time" />
</div>

var flatpickrTime = document.querySelector("#flatpickr-time");

flatpickrTime.flatpickr({
  enableTime: true,
  noCalendar: true,
  static: true
});

Date Time Picker

Use enableTime: true to have both date and time pickers.

Datetime Picker

<div class="mb-3">
  <label for="flatpickr-datetime" class="form-label">Datetime Picker</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-datetime" />
</div>

var flatpickrDateTime = document.querySelector("#flatpickr-datetime");

flatpickrDateTime.flatpickr({
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  static: true
});

Multi Dates Picker

Use mode: "multiple" to select multiple dates.

Multiple Dates Picker

<div class="mb-3">
  <label for="flatpickr-multi" class="form-label">Multiple Dates Picker</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-multi" />
</div>

var flatpickrMulti = document.querySelector("#flatpickr-multi");

flatpickrMulti.flatpickr({
  weekNumbers: true,
  enableTime: true,
  mode: "multiple",
  minDate: "today",
  static: true
});

Range Picker

Use mode: "range" to select dates in range.

Range Picker

<div class="mb-3">
  <label for="flatpickr-range" class="form-label">Range Picker</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
</div>

var flatpickrRange = document.querySelector("#flatpickr-range");

flatpickrRange.flatpickr({
  mode: "range",
  static: true
});

Human Friendly Picker

Refer below mentioned example to create a human friendly picker.

Human Friendly Date Picker

<div class="mb-3">
  <label for="flatpickr-human-friendly" class="form-label">Human Friendly Date Picker</label>
  <input type="text" class="form-control" placeholder="Month DD, YYYY" id="flatpickr-human-friendly" />
</div>

var flatpickrFriendly = document.querySelector("#flatpickr-human-friendly");

flatpickrFriendly.flatpickr({
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d",
  static: true
});

Disabled Range Picker

Create an array of disabled date like this: disable: [{from: "DATE", to: "DATE"}] to create a disabled range dates picker

Disabled Range

<div class="mb-3">
  <label for="flatpickr-disabled-range" class="form-label">Disabled Range</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-disabled-range" />
</div>

var flatpickrDisabledRange = document.querySelector("#flatpickr-disabled-range");

flatpickrDisabledRange.flatpickr({
  dateFormat: "Y-m-d",
  disable: [
    {
      from: "2021-10-01",
      to: "2021-10-10"
    }
  ],
  static: true
});

Inline Picker

Use inline : true to make your picker inline.

Inline Picker

<div class="mb-3">
  <label for="flatpickr-inline" class="form-label">Inline Picker</label>
  <input type="text" class="form-control mb-1" placeholder="YYYY-MM-DD" id="flatpickr-inline" />
</div>

var flatpickrInline = document.querySelector("#flatpickr-inline");

flatpickrInline.flatpickr({
  inline: true,
  allowInput: false,
  monthSelectorType: "static"
});

Bootstrap Daterangepicker

Bootstrap Datepicker is a bootstrap compatible date range picker based on jQuery. We have customized picker for LTR & RTL with it's opens option.

Usage

In order to use Bootstrap Daterangepicker on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js" />

Basic

Use YOUR_ELEMENT.daterangepicker() to create a basic datepicker.

Basic

<div class="mb-3">
  <label for="bs-rangepicker-basic" class="form-label">Basic</label>
  <input type="text" id="bs-rangepicker-basic" class="form-control" />
</div>

$("#bs-rangepicker-basic").daterangepicker({
  opens: isRtl ? 'left' : 'right'
});

Single

Use singleDatePicker: true property to create a single datepicker.

Single Picker

<div class="mb-3">
  <label for="bs-rangepicker-single" class="form-label">Single Picker</label>
  <input type="text" id="bs-rangepicker-single" class="form-control" />
</div>

$("#bs-rangepicker-single").daterangepicker({
  singleDatePicker: true,
  opens: isRtl ? 'left' : 'right'
});

With Timepicker

Use timePicker: true property to add a timepicker.

With Time Picker

<div class="mb-3">
  <label for="bs-rangepicker-time" class="form-label">With Time Picker</label>
  <input type="text" id="bs-rangepicker-time" class="form-control" />
</div>

$("#bs-rangepicker-time").daterangepicker({
  timePicker: true,
  timePickerIncrement: 30,
  locale: {
    format: 'MM/DD/YYYY h:mm A'
  },
  opens: isRtl ? 'left' : 'right'
});

Range

Use ranges property for ranges of picker.

Ranges

<div class="mb-3">
  <label for="bs-rangepicker-range" class="form-label">Ranges</label>
  <input type="text" id="bs-rangepicker-range" class="form-control" />
</div>

$(".bs-rangepicker-range").daterangepicker({
  ranges: {
    Today: [moment(), moment()],
    Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  opens: isRtl ? 'left' : 'right'
});

Week Numbers

Use showWeekNumbers: true property to show week numbers.

Week Numbers

<div class="mb-3">
  <label for="bs-rangepicker-week-num" class="form-label">Week Numbers</label>
  <input type="text" id="bs-rangepicker-week-num" class="form-control" />
</div>

$("#bs-rangepicker-week-num").daterangepicker({
  showWeekNumbers: true,
  opens: isRtl ? 'left' : 'right'
});

Use showDropdowns: true property to show dropdowns for month and year.

Month & Year Dropdown

<div class="mb-3">
  <label for="bs-rangepicker-dropdown" class="form-label">Month & Year Dropdown</label>
  <input type="text" id="bs-rangepicker-dropdown" class="form-control" />
</div>

$("#bs-rangepicker-dropdown").daterangepicker({
  showDropdowns: true,
  opens: isRtl ? 'left' : 'right'
});

jQuery Timepicker

jQuery Timepicker a lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar. We have customized Timepicker for LTR & RTL with it's orientation option.

Usage

In order to use jQuery Timepicker on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" />

Basic

Use YOUR_ELEMENT.timepicker() to create a basic timepicker.

Basic

<div class="mb-3">
  <label for="timepicker-basic" class="form-label">Basic</label>
  <input type="text" id="timepicker-basic" placeholder="HH:MMam" class="form-control" />
</div>

$("#timepicker-basic").timepicker({
  orientation: isRtl ? 'r' : 'l'
});

Min Max

Use minTime and maxTime to create a timepicker with min and max time. Use showDuration: true property to show time duration along with the time.

Min-Max

<div class="mb-3">
  <label for="timepicker-min-max" class="form-label">Min-Max</label>
  <input type="text" id="timepicker-min-max" placeholder="HH:MMam" class="form-control" />
</div>

$("#timepicker-min-max").timepicker({
  minTime: '2:00pm',
  maxTime: '7:00pm',
  showDuration: true,
  orientation: isRtl ? 'r' : 'l'
});

Disabled Times

Use disableTimeRanges property to disable range of time.

Disabled Times

<div class="mb-3">
  <label for="timepicker-disabled-times" class="form-label">Disabled Times</label>
  <input type="text" id="timepicker-disabled-times" placeholder="HH:MMam" class="form-control" />
</div>

$("#timepicker-disabled-times").timepicker({
  disableTimeRanges: [
    ['12am', '3am'],
    ['4am', '4:30am']
  ],
  orientation: isRtl ? 'r' : 'l'
});

Format

Use timeFormat property to change the format of time.

Format

<div class="col-md-6 col-12">
  <label for="timepicker-format" class="form-label">Format</label>
  <input type="text" id="timepicker-format" placeholder="HH:MM:SS" class="form-control" />
</div>

$("#timepicker-format").timepicker({
  show: '24:00',
  timeFormat: 'H:i:s',
  orientation: isRtl ? 'r' : 'l'
});

Steps

Use steps property to create a timepicker with steps.

Step

<div class="mb-3">
  <label for="timepicker-step" class="form-label">Step</label>
  <input type="text" id="timepicker-step" placeholder="HH:MMam" class="form-control" />
</div>

$("#timepicker-step").timepicker({
  step: 15,
  orientation: isRtl ? 'r' : 'l'
});

24 Hours Time Format

Use show: "24:00" property to create a timepicker with 24 hours time format. You may also use timeFormat property for your preferred format of time.

24 Hours Format

<div class="mb-3">
  <label for="timepicker-24hours" class="form-label">24 Hours Format</label>
  <input type="text" id="timepicker-24hours" placeholder="20:00:00" class="form-control" />
</div>

$("#timepicker-24hours").timepicker({
  show: "24:00",
  timeFormat: 'H:i:s',
});

Pickr

Pickr is a flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

Usage

In order to use pickr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<!-- Below file includes three styles in the pickr-themes.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-themes.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/pickr/pickr.js" />

Classic

Use theme: "classic" property to have a classic styled color picker.

<div id="color-picker-classic"></div>

const classicPickr = new Pickr({
  el: classicPicker,
  theme: 'classic',
  default: 'rgba(102, 108, 232, 1)',
  swatches: [
    'rgba(102, 108, 232, 1)',
    'rgba(40, 208, 148, 1)',
    'rgba(255, 73, 97, 1)',
    'rgba(255, 145, 73, 1)',
    'rgba(30, 159, 242, 1)'
  ],
  components: {
    // Main components
    preview: true,
    opacity: true,
    hue: true,

    // Input / output Options
    interaction: {
      hex: true,
      rgba: true,
      hsla: true,
      hsva: true,
      cmyk: true,
      input: true,
      clear: true,
      save: true
    }
  }
});

Monolith

Use theme: "monolith" property to have a monolith styled color picker.

<div id="color-picker-monolith"></div>

const monoPickr = new Pickr({
  el: monolithPicker,
  theme: 'monolith',
  default: 'rgba(40, 208, 148, 1)',
  swatches: [
    'rgba(102, 108, 232, 1)',
    'rgba(40, 208, 148, 1)',
    'rgba(255, 73, 97, 1)',
    'rgba(255, 145, 73, 1)',
    'rgba(30, 159, 242, 1)'
  ],
  components: {
    // Main components
    preview: true,
    opacity: true,
    hue: true,

    // Input / output Options
    interaction: {
      hex: true,
      rgba: true,
      hsla: true,
      hsva: true,
      cmyk: true,
      input: true,
      clear: true,
      save: true
    }
  }
});

Nano

Use theme: "nano" property to have a nano styled color picker.

<div id="color-picker-nano"></div>

const nanoPickr = new Pickr({
  el: nanoPicker,
  theme: 'nano',
  default: 'rgba(255, 73, 97, 1)',
  swatches: [
    'rgba(102, 108, 232, 1)',
    'rgba(40, 208, 148, 1)',
    'rgba(255, 73, 97, 1)',
    'rgba(255, 145, 73, 1)',
    'rgba(30, 159, 242, 1)'
  ],
  components: {
    // Main components
    preview: true,
    opacity: true,
    hue: true,

    // Input / output Options
    interaction: {
      hex: true,
      rgba: true,
      hsla: true,
      hsva: true,
      cmyk: true,
      input: true,
      clear: true,
      save: true
    }
  }
});