Pickers · Material

Date pickers

Date pickers use a dialog window to select a single date on mobile.

A date picker has to be activated via JavaScript.

N.B. Date picker requires material.js or material.min.js.

A basic example:

<label for="exampleInputDatePicker1">A basic example:</label>
<input class="form-control" id="exampleInputDatePicker1" placeholder="Pick a date" type="text">

$('#exampleInputDatePicker1').pickdate();

Options

Alternatively, options can be passed on to override some default datepicker behaviours.

A customised date picker:

$('.datepicker').pickdate({
  cancel: 'Clear',
  closeOnCancel: false,
  closeOnSelect: true,
  container: '',
  firstDay: 1,
  format: 'You selecte!d: dddd, d mm, yy', // escape any formatting characters with an exclamation mark
  formatSubmit: 'dd/mmmm/yyyy',
  ok: 'Close',
  onClose: function () {
    console.log('Datepicker closes');
  },
  onOpen: function () {
    console.log('Datepicker opens');
  },
  selectMonths: true,
  selectYears: 10,
  today: 'Today'
});

Option	Description
cancel	Change the text of the cancel button or use `cancel: ''` to hide the button. Default is `'Cancel'`.
closeOnCancel	Close the picker when the cancel button is clicked. Default is `true`. Set to `false` to change this behaviour.
closeOnSelect	Close the picker when a date is selected. Default is `false`. Set to `true` to change this behaviour.
container	Change where to insert the datepicker element by passing any valid CSS selector. Default is `'body'`. Set it to `''` to insert the picker right after the associated `input` element.
disable	Disable a date or a set of dates from being selectable in the picker. See below for detailed usage.
firstDay	Change the first day of the week. Default is `0` which sets it to Sunday. Set it to Monday by changing the value to `1`.
format	Set the date format. See below for a full list of available date format rules.
formatSubmit	Optionally, set a different date format for the value to be submitted to the server. When `formatSubmit` is specified, a hidden `input` will be created to hold the value.
max	Set the maximum selectable date. See below for detailed usage.
min	Set the minimum selectable date. See below for detailed usage.
monthsFull	Change labels of months.
monthsShort	Change abbreviations of months.
ok	Change the text of the OK button or set it to `''` to hide the button. Default is `'OK'`.
onClose, onOpen, onRender, onSet, onStart, onStop	Fire events as the user interacts with the picker. Within scope of these events, `this` refers to the picker.
selectMonths	Default is `false`. Set it to `true` to display a dropdown menu to pick the month.
selectYears	Default is `false`. Set it to `true` to display a dropdown menu to pick the year or use an even integer to specify the number of years to be shown in the dropdown menu (half after and the other half before the year in focus).
today	Change the text of the today button or pass an empty value to hide the button: `today: ''`. Default is `'Today'`.
weekdaysFull	Change labels of weekdays.
weekdaysShort	Change abbreviations of weekdays.

Date limit

Maximum and minimum selectable dates can be set on the picker.

Using boolean or integers:

$('.datepicker').pickdate({
  // Default is `false` which removes any limits. `true` sets it to today.
  max: true,
  // An integer (negative or positive) sets it relative to today.
  min: -10
});

Using JavaScript date:

$('.datepicker').pickdate({
  max: new Date(2016,1,13),
  min: new Date(2016,0,3)
});

Using [YEAR,MONTH,DATE]:

$('.datepicker').pickdate({
  max: [2016,1,13],
  min: [2016,0,3]
});

Disable dates

Disable a specific or arbitrary set of dates selectable on the picker.

Using JavaScript date or [YEAR,MONTH,DATE]:

$('.datepicker').pickdate({
  disable: [
    new Date(2016,0,16),
    new Date(2016,0,20),
    [2016,0,24]
  ]
});

Using integers as days of the week:

$('.datepicker').pickdate({
  disable: [
    1, 2, 3
  ]
});

Using objects as a range of dates:

$('.datepicker').pickdate({
  disable: [
    { from: new Date(2016,0,16), to: [2016,0,24] }
  ]
});

The values for from and to can be:

Array formatted as [YEAR,MONTH,DATE]
JavaScript date
true to set it as “today”

The values can also be integers representing dates relative to the other:

from can only be negative:

{ from: -10, to: true }

to can only be positive:

{ from: [2016,0,16], to: 10 }

Formatting rules

The following rules can be used to format any date:

Rule	Description	Result
`d`	Date of the month	1 – 31
`dd`	Date of the month with a leading zero	01 – 31
`ddd`	Day of the week in short form	Sun – Sat
`dddd`	Day of the week in full form	Sunday – Saturday
`m`	Month of the year	1 – 12
`mm`	Month of the year with a leading zero	01 – 12
`mmm`	Month name in short form	Jan – Dec
`mmmm`	Month name in full form	January – December
`yy`	Year in short form *	00 – 99
`yyyy`	Year in full form	2000 – 2999

Date pickers
Options