Forms - Pickers | Frest - Bootstrap 5 Admin Template

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

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

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

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

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

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

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

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

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 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

Basic

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

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

Format

Use format property to change date format.

Format

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

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

Range

Create a range input using bootstrap's input group.

Date Range

<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.

Disabled Days

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

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

Multiple

Use multidate: true property to select multiple dates.

Multidate

<div class="mb-3">
  <label for="bs-datepicker-multidate" class="form-label">Multidate</label>
  <input type="text" id="bs-datepicker-multidate" placeholder="MM/DD/YYYY, MM/DD/YYYY" class="form-control" />
</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.

Options

<div class="mb-3">
  <label for="bs-datepicker-options" class="form-label">Options</label>
  <input type="text" id="bs-datepicker-options" placeholder="MM/DD/YYYY" class="form-control" />
</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.

Auto Close

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

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

Inline

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

Inline

<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.

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

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

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

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

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

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

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.

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

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

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

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

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

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:

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