Pickers Content

Date Picker

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

Birthdate

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

Initialization

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.datepicker').datepicker();
  });

Options

Date format options

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

Datepicker Internationalization options

Use these in the i18n option to localize the datepicker.

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

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

Copy

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

/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.

$('.datepicker').datepicker('methodName');
$('.datepicker').datepicker('methodName', paramName);
*/

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

Lunchtime

<input type="text" class="timepicker">

Initialization

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.timepicker');
    var instances = M.Timepicker.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.timepicker').timepicker();
  });

Options

Timepicker Internationalization options

Use these in the i18n option to localize the timepicker.

Properties

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

Copy

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

/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.

$('.timepicker').timepicker('methodName');
$('.timepicker').timepicker('methodName', paramName);
*/

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