Color Scheme

Date Picker

Select single or multiple dates, ranges and more.

<input type="text" class="datepicker">
Initialization
document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.datepicker');
  const instances = M.Datepicker.init(elems, {
    // specify options here
  });
});
Options
Name Type Default Description
autoClose Boolean false DEPRECATED 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 DEPRECATED Callback function when Datepicker is opened.
onClose Function null DEPRECATED Callback function when Datepicker is closed.
isDateRange Boolean false Condition to enable date range selection.
dateRangeEndEl Selector null (optional) selector for defined end date HTML element.
openByDefault Boolean false Condition show the datepicker in open state by default.
onInputInteraction Function null Callback function on input field interaction.
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:

const instance = M.Datepicker.getInstance(elem);
.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();
.open();

DEPRECATED Open datepicker

.close();

DEPRECATED Close datepicker