Material Admin
Form Pickers
Date Picker
We use a modified version of pickadate.js to create a materialized date picker. Test it out below!
<input type="text" class="datepicker">
Initialization
var elem = document.querySelector('.datepicker');
var instance = M.Datepicker.init(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.datepicker').datepicker();
});
Options
| Name | Type | Default | Description |
|---|---|---|---|
| format | String | 'mmm dd, yyyy' | The date output format for the input field value. |
| 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. |
| 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 | String | null | Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. |
| 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 |
|---|---|
| clear | 'Clear' |
| today | 'Today' |
| 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
Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:
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
Date (optional): Date to set on the datepicker.
instance.setDate(new Date());
.gotoDate();
Change date view to a specific date on the datepicker
Date: Date to show on the datepicker.
instance.gotoDate(new Date());
.destroy();
Destroy plugin instance and teardown
instance.destroy();
Time Picker
<input type="text" class="timepicker">
Initialization
var elem = document.querySelector('.timepicker');
var instance = M.Timepicker.init(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.timepicker').timepicker();
});
Options
| Name | Type | Default | Description |
|---|---|---|---|
| duration | Number | 350 | Duration of the transition from/to the hours/minutes view. |
| container | String | null | Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. |
| 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. |
Timepicker Internationalization options
Use these in the i18n option to localize the timepicker.
| Key | Text |
|---|---|
| clear | 'Clear' |
| cancel | 'Cancel' |
| 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
Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:
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
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();