Pickers

Materialize is a modern responsive CSS framework based on Material Design by Google.

Date Picker

The datepicker allows users to select a date from an interactive calendar.

<input type="text" class="datepicker">
Initialization

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, {
      // specify options here
    });
  });
Options
Name Type Default Description
autoClose Boolean false Automatically close picker when date is selected.
format String || Function 'mmm dd, yyyy' The date output format for the input field value or a function taking the date and outputting the formatted date string.
parse Function null Used to create date object from current input string.
defaultDate Date null The initial date to view when first opened.
setDefaultDate Boolean false Make the defaultDate the initial selected value.
disableWeekends Boolean false Prevent selection of any date on the weekend.
disableDayFn Function null Custom function to disable certain days.
firstDay Number 0 First day of week (0: Sunday, 1: Monday etc).
minDate Date null The earliest date that can be selected.
maxDate Date null The latest date that can be selected.
yearRange Number || Array 10 Number of years either side, or array of upper/lower range.
yearRangeReverse Boolean false Sort year range in reverse order
isRTL Boolean false Changes Datepicker to RTL.
showMonthAfterYear Boolean false Show month after year in Datepicker title.
showDaysInNextAndPreviousMonths Boolean false Render days of the calendar grid that fall in the next or previous month.
container Element || String null Specify a DOM element OR selector for a DOM element to render the calendar in, by default it will be placed before the input.
showClearBtn Boolean false Show the clear button in the datepicker.
i18n Object See i18n documentation. Internationalization options.
events Array [] An array of string returned by `Date.toDateString()`, indicating there are events in the specified days.
onSelect Function null Callback function when date is selected, first parameter is the newly selected date.
onOpen Function null Callback function when Datepicker is opened.
onClose Function null Callback function when Datepicker is closed.
onDraw Function null Callback function when Datepicker HTML is refreshed.
Date format options

Use these in the format option to customize your date string.

Key Description Output
d Date of the month. 1-31
dd Date of the month (2 digits). 01-31
ddd Day of the week in short form set by the i18n option. Sun-Sat
dddd Day of the week in full form set by the i18n option. Sunday-Saturday
m Month of the year. 1-12
mm Month of the year (2 digits). 01-12
mmm Month of the year in short form set by the i18n option. Jan-Dec
mmmm Month of the year in full form set by the i18n option. January-December
yy 2-digit year. 17
yyyy 4-digit year. 2017
Datepicker Internationalization options

Use these in the i18n option to localize the datepicker.

Key Text
cancel 'Cancel'
clear 'Clear'
done 'Ok'
previousMonth '‹'
nextMonth '›'
months 
[
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]
monthsShort 
[
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec'
]
weekdays 
[
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday'
]
weekdaysShort 
[
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]
weekdaysAbbrev ['S','M','T','W','T','F','S']
Properties
Name Type Description
el Element The input element the plugin was initialized with.
options Object The options the instance was initialized with.
isOpen Boolean If the picker is open.
date Date The selected Date.
Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:


  var instance = M.Datepicker.getInstance(elem);
.open();

Open datepicker


instance.open();
.close();

Close datepicker


instance.close();
.toString();

Gets a string representation of the selected date


instance.toString();
.setDate();

Set a date on the datepicker

Arguments

Date (optional): Date to set on the datepicker.


instance.setDate(new Date());
.gotoDate();

Change date view to a specific date on the datepicker

Arguments

Date: Date to show on the datepicker.


instance.gotoDate(new Date());
.destroy();

Destroy plugin instance and teardown


instance.destroy();

Time Picker

The timepicker allows users to select a date from an interactive clock.
Initialization

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.timepicker');
    var instances = M.Timepicker.init(elems, {
      // specify options here
    });
  });
Options
Name Type Default Description
duration Number 350 Duration of the transition from/to the hours/minutes view.
container Element || String null Specify a DOM element OR selector for a DOM element to render the time picker in, by default it will be placed before the input.
showClearBtn Boolean false Show the clear button in the Timepicker.
defaultTime String 'now' Default time to set on the timepicker 'now' or '13:14'
fromNow Number 0 Millisecond offset from the defaultTime.
i18n Object See i18n documentation. Internationalization options.
autoClose Boolean false Automatically close picker when minute is selected.
twelveHour Boolean true Use 12 hour AM/PM clock instead of 24 hour clock.
vibrate Boolean true Vibrate device when dragging clock hand.
onOpenStart Function null Callback function called before modal is opened.
onOpenEnd Function null Callback function called after modal is opened.
onCloseStart Function null Callback function called before modal is closed.
onCloseEnd Function null Callback function called after modal is closed.
onSelect Function null Callback function when a time is selected, first parameter is the hour and the second is the minute.
Timepicker Internationalization options

Use these in the i18n option to localize the timepicker.

Key Text
cancel 'Cancel'
clear 'Clear'
done 'Ok'
Properties
Name Type Description
el Element The input element the plugin was initialized with.
options Object The options the instance was initialized with.
isOpen Boolean If the picker is open.
time String The selected time.
Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:


  var instance = M.Timepicker.getInstance(elem);
.open();

Open timepicker


instance.open();
.close();

Close timepicker


instance.close();
.showView();

Show hours or minutes view on timepicker

Arguments

String: The name of the view you want to switch to, 'hours' or 'minutes'.


instance.showView('hours');
.destroy();

Destroy plugin instance and teardown


instance.destroy();