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.

April
SunMonTueWedThuFriSat
303112345678910111213141516171819202122232425262728293012345678910
  <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.

«April 2025»
SuMoTuWeThFrSa
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
<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- 2025 Pixinvent, Hand-crafted & Made with ❤️
April
SunMonTueWedThuFriSat
303112345678910111213141516171819202122232425262728293012345678910
:
PM
SunMonTueWedThuFriSat
303112345678910111213141516171819202122232425262728293012345678910
:
PM
Wk
141516171819
SunMonTueWedThuFriSat
303112345678910111213141516171819202122232425262728293012345678910
:
PM
SunMonTueWedThuFriSat
303112345678910111213141516171819202122232425262728293012345678910
SunMonTueWedThuFriSat
303112345678910111213141516171819202122232425262728293012345678910
SunMonTueWedThuFriSat
303112345678910111213141516171819202122232425262728293012345678910