Canvas Docs

Date-Time Pickers

Date & Time Pickers

Canvas bundles a Bootstrap date picker, a time picker, and a date range picker so you can add calendar and clock inputs to any form. A lightweight Flatpickr picker is also used in some form demos for a compact single field calendar.

Setup

Include the picker stylesheets in the <head> and the picker scripts before </body>.

<!-- In <head> -->
<link rel="stylesheet" href="css/components/datepicker.css">
<link rel="stylesheet" href="css/components/timepicker.css">
<link rel="stylesheet" href="css/components/daterangepicker.css">

<!-- Before </body> -->
<script src="js/components/timepicker.js"></script>
<script src="js/components/datepicker.js"></script>
<script src="js/components/daterangepicker.js"></script>

Structure

Date picker

Add .component-datepicker (plus a targeting class) to a text input and initialize with datepicker().

<label>Default Date</label>
<input type="text" class="form-control text-start component-datepicker default" placeholder="MM/DD/YYYY">

<label>Date Range</label>
<div class="input-daterange component-datepicker input-group">
  <input type="text" class="form-control text-start" placeholder="MM/DD/YYYY">
  <div class="input-group-text">to</div>
  <input type="text" class="form-control text-start" placeholder="MM/DD/YYYY">
</div>

<label>Inline Calendar</label>
<div class="inline-calendar component-datepicker"></div>
jQuery('.component-datepicker.default').datepicker({
  autoclose: true,
  startDate: "today"
});

jQuery('.component-datepicker.format').datepicker({
  autoclose: true,
  format: "dd-mm-yyyy"
});

jQuery('.component-datepicker.input-daterange').datepicker({
  autoclose: true
});

jQuery('.component-datepicker.inline-calendar').datepicker();

Date and time picker

Use an input group toggled by data-toggle="datetimepicker" and target it with datetimepicker().

<div class="input-group text-start" data-target-input="nearest" data-target=".datetimepicker">
  <input type="text" class="form-control datetimepicker-input datetimepicker" data-target=".datetimepicker" placeholder="MM/DD/YYYY 00:00 AM/PM">
  <div class="input-group-text" data-target=".datetimepicker" data-toggle="datetimepicker"><i class="bi-calendar"></i></div>
</div>
jQuery('.datetimepicker').datetimepicker({ showClose: true });
jQuery('.datetimepicker1').datetimepicker({ format: 'LT', showClose: true });
jQuery('.datetimepicker2').datetimepicker({ inline: true, sideBySide: true });

Flatpickr (compact single field)

Some form demos use Flatpickr from its CDN for a minimal calendar. Add the input, load Flatpickr, then call flatpickr().

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" id="flatpickr_theme">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
jQuery('#step-form-age').flatpickr({
  minDate: "today",
  dateFormat: "d/m/Y"
});

Options

Date picker (datepicker()):

  • autoclose: close the calendar once a date is picked.
  • startDate: earliest selectable date, for example "today".
  • format: display format, for example "dd-mm-yyyy" or "mm/yy".
  • todayHighlight: highlight the current day.
  • daysOfWeekDisabled: disable weekdays by index, for example "0" for Sunday.
  • daysOfWeekHighlighted: highlight weekdays by index.
  • minViewMode: set to 1 for a month only picker.
  • multidate / multidateSeparator: allow multiple dates and set their separator.

Date and time picker (datetimepicker()):

  • format: for example 'LT' for a time only field.
  • inline: render the calendar inline instead of on click.
  • sideBySide: show date and time panes together.
  • showClose: display a close button.

Flatpickr (flatpickr()):

  • minDate: earliest selectable date, for example "today".
  • dateFormat: for example "d/m/Y".

Tips

  • The date range picker relies on the .input-daterange wrapper containing exactly two inputs.
  • For a time only control, pass format: 'LT' to datetimepicker().
Was this page helpful?