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

  <div class="form-floating form-floating-outline">
    <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-date" />
    <label for="flatpickr-date">Date Picker</label>
  </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}.

  <div class="form-floating form-floating-outline">
    <input type="text" class="form-control" placeholder="HH:MM" id="flatpickr-time" />
    <label for="flatpickr-time">Time Picker</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-datetime" />
    <label for="flatpickr-datetime">Datetime Picker</label>
  </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.

<div class="form-floating form-floating-outline">
  <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-multi" />
  <label for="flatpickr-multi">Multiple Dates Picker</label>
</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.

  <div class="form-floating form-floating-outline">
    <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
    <label for="flatpickr-range">Range Picker</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" class="form-control" placeholder="Month DD, YYYY" id="flatpickr-human-friendly" />
    <label for="flatpickr-human-friendly">Human Friendly Date Picker</label>
  </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

  <div class="form-floating form-floating-outline">
    <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-disabled-range" />
    <label for="flatpickr-disabled-range">Disabled Range</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" class="form-control mb-1" placeholder="YYYY-MM-DD" id="flatpickr-inline" />
    <label for="flatpickr-inline">Inline Picker</label>
  </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.

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

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

Single

Use singleDatePicker: true property to create a single datepicker.

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

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

With Timepicker

Use timePicker: true property to add a timepicker.

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-rangepicker-time" class="form-control" />
    <label for="bs-rangepicker-time">With Time Picker</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-rangepicker-range" class="form-control" />
    <label for="bs-rangepicker-range">Ranges</label>
  </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.

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

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

Month & Week Dropdown

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

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-rangepicker-dropdown" class="form-control" />
    <label for="bs-rangepicker-dropdown">Month & Year Dropdown</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" id="timepicker-basic" placeholder="HH:MMam" class="form-control" />
    <label for="timepicker-basic">Basic</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" id="timepicker-min-max" placeholder="HH:MMam" class="form-control" />
    <label for="timepicker-min-max">Min-Max</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" id="timepicker-disabled-times" placeholder="HH:MMam" class="form-control" />
    <label for="timepicker-disabled-times">Disabled Times</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" id="timepicker-format" placeholder="HH:MM:SS" class="form-control" />
    <label for="timepicker-format">Format</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" id="timepicker-step" placeholder="HH:MMam" class="form-control" />
    <label for="timepicker-step">Step</label>
  </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.

  <div class="form-floating form-floating-outline">
    <input type="text" id="timepicker-24hours" placeholder="20:00:00" class="form-control" />
    <label for="timepicker-24hours">24 Hours Format</label>
  </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
    }
  }
});
© 2017- Pixinvent, Hand-crafted & Made with ❤️