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 datepicker, 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"
});

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
});

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"
});

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"
});

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"
});

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"
});

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"
    }
  ]
});

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 Datepicker

Bootstrap Datepicker is a datepicker for bootstrap framework with jQuery dependency.

Usage

In order to use Bootstrap Datepicker 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-datepicker/bootstrap-datepicker.css" />

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

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

Basic

Use YOUR_ELEMENT.datepicker() to create a basic datepicker 

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-datepicker-basic" placeholder="MM/DD/YYYY" class="form-control" />
    <label for="bs-datepicker-basic">Basic</label>
  </div>

$("#bs-datepicker-basic").datepicker();

Format

Use format property to change date format. 

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-datepicker-format" placeholder="DD/MM/YYYY" class="form-control" />
    <label for="bs-datepicker-format">Format</label>
  </div>

$("#bs-datepicker-format").datepicker({ format: "dd/mm/yyyy" });

Range

Create a range input using bootstrap's input group.

to 
<div class="mb-3">
  <label for="dateRangePicker" class="form-label">Date Range</label>
  <div class="input-group input-daterange" id="bs-datepicker-daterange">
    <input id="dateRangePicker" type="text" placeholder="MM/DD/YYYY" class="form-control" />
    <span class="input-group-text">to</span>
    <input type="text" placeholder="MM/DD/YYYY" class="form-control" />
  </div>
</div>
$("#bs-datepicker-daterange").datepicker();

Disabled Days

Use daysOfWeekDisabled property to disable particular week days. In the example below, we have disables all days of Saturday and Sunday.

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-datepicker-disabled-days" placeholder="MM/DD/YYYY" class="form-control" />
    <label for="bs-datepicker-disabled-days">Disabled Days</label>
  </div>

$("#bs-datepicker-disabled-days").datepicker({ daysOfWeekDisabled: [0,6] });

Multiple

Use multidate: true property to select multiple dates.

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-datepicker-multidate" placeholder="MM/DD/YYYY, MM/DD/YYYY" class="form-control" />
    <label for="bs-datepicker-multidate">Multidate</label>
  </div>

$("#bs-datepicker-multidate").datepicker({ multidate: true });

Options

You can use any options according to your needs. In the below example, we have used calendarWeeks, clearBtn, todayHighlight and orientation: "auto right" options.

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-datepicker-options" placeholder="MM/DD/YYYY" class="form-control" />
    <label for="bs-datepicker-options">Options</label>
  </div>

$("#bs-datepicker-options").datepicker({
  calendarWeeks: true,
  clearBtn: true,
  todayHighlight: true,
  orientation: "auto right"
});

Autoclose

Use autoclose: true property to automatically close your datepicker on date selection.

  <div class="form-floating form-floating-outline">
    <input type="text" id="bs-datepicker-autoclose" placeholder="MM/DD/YYYY" class="form-control" />
    <label for="bs-datepicker-autoclose">Auto Close</label>
  </div>

$("#bs-datepicker-autoclose").datepicker({ autoclose: true });

Inline

Use <div> instead of <input> to create inline datepicker.

<div class="mb-3">
  <label class="form-label">Inline</label>
  <div id="bs-datepicker-inline"></div>
</div>
$("#bs-datepicker-inline").datepicker();

Bootstrap Daterangepicker

Bootstrap Datepicker is a bootstrap compatible date range picker based on jQuery.

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();

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 });

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'
  },
});

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")
    ]
  }
});

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 });

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 });

jQuery Timepicker

jQuery Timepicker a lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar.

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();

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
});

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"]
  ]
});

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({ timeFormat: "H:i:s" });

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 });

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: 

<!-- If you want all three styles, include pickr-themes.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-themes.css" />

<!-- If you only want classic style, include pickr-classic.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-classic.css" />

<!-- If you only want monolith style, include pickr-monolith.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-monolith.css" />

<!-- If you only want nano style, include pickr-nano.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-nano.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>
var classicPicker = pickr.create({
  el: "#color-picker-classic",
  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>
var monolithPicker = pickr.create({
  el: "#color-picker-monolith",
  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>
var nanoPicker = pickr.create({
  el: "#color-picker-nano",
  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 ❤️