选择器 - Materialize

日期选择器允许用户从交互式日历中选择日期。

生日


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

初始化


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

  // 或用JQuery

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

选项

名称	类型	默认	描述
autoClose	Boolean	false	选择日期后自动关闭选取器。
format	String	'mmm dd, yyyy'	格式化日期
parse	Function	null	用于根据当前输入字符串创建日期对象
defaultDate	Date	null	首次打开时要查看的初始日期。
setDefaultDate	Boolean	false	将defaultDate设为初始选定值。
disableWeekends	Boolean	false	禁止选择周末的任何日期。
disableDayFn	Function	null	自定义功能可禁用特定日期。
firstDay	Number	0	一周的第一天（0：周日，1：周一等）。
minDate	Date	null	可以选择的最早日期。
maxDate	Date	null	可以选择的最新日期。
yearRange	Number \|\| Array	10	两边的年数，或上/下范围的数组。
isRTL	Boolean	false	是否将日期选择器更改为RTL。
showMonthAfterYear	Boolean	false	在日期选择器标题中的年份后面显示月份。
showDaysInNextAndPreviousMonths	Boolean	false	渲染日历网格中下一个月或上一个月的天数。
container	Element	null	指定一个DOM元素来呈现日历，默认情况下，它将被放置在输入之前。
showClearBtn	Boolean	false	在日期选择器中显示清除按钮。
i18n	Object	See i18n documentation.	国际化选项。
events	Array	[]	由`Date.toDateString（）`返回的字符串数组，表示指定日期内有事件。
onSelect	Function	null	回调函数当选择日期时，第一个参数是新选择的日期。
onOpen	Function	null	打开日期选择器时的回调函数。
onClose	Function	null	Datepicker关闭时的回调函数。
onDraw	Function	null	当日期选择器HTML刷新时回调

日期格式化选项

在格式选项中使用这些选项可以自定义日期字符串。

键	描述	输出
d	月份中的某一日	1-31
dd	月份中的某一日(2 数字).	01-31
ddd	i18n选项设置的短格式的星期几。	Sun-Sat
dddd	i18n选项设置的完整形式的星期几。	Sunday-Saturday
m	一年中的月份。一年中的月份。	1-12
mm	一年中的月份（2位数字）。	01-12
mmm	由i18n选项设置的缩写形式的一年中的月份。	Jan-Dec
mmmm	i18n选项设置的完整形式的一年中的月份。	January-December
yy	2位数年份。	17
yyyy	4位数年份。	2017

日期选择器国际化选项

在i18n选项中使用这些来本地化日期选择器。

键	文本
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']

属性

名称	类型	描述
el	Element	插件初始化时使用的输入元素。
options	Object	初始化实例时使用的选项。
isOpen	Boolean	日期选择器是否已经打开
date	Date	日期选择器选中的日期

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以得到插件实例如下：


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

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

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

.open();

打开日期选择器


instance.open();

.close();

关闭日期选择器


instance.close();

.toString();

获取所选日期的字符串表示形式


instance.toString();

.setDate();

在日期选择器上设置日期

参数

Date (可选): 要在日期选择器上设置的日期。


instance.setDate(new Date());

.gotoDate();

在日期选择器上将日期视图更改为特定日期

参数

Date:要在日期选择器上显示的日期。


instance.gotoDate(new Date());

.destroy();

销毁插件实例并回收


instance.destroy();

时间选择器允许用户从交互式时钟中选择日期。

午餐时间


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

初始化


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

  // 或用JQuery

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

选项

名称	类型	默认	描述
duration	Number	350	时分切换时间间隔
container	String	null	为DOM元素指定一个选择器以在其中呈现日历，默认情况下，它将被放置在输入之前。
showClearBtn	Boolean	false	在时间选择器中显示清除按钮。
defaultTime	String	'now'	要在时间选择器上设置的默认时间“now”或“13:14”
fromNow	Number	0	与defaultTime的毫秒偏移量。
i18n	Object	See i18n documentation.	国际化选项。
autoClose	Boolean	false	选择分钟时自动关闭选取器
twelveHour	Boolean	true	使用12小时AM/PM时钟，而不是24小时时钟。
vibrate	Boolean	true	拖动时钟指针时振动设备。
onOpenStart	Function	null	在打开模态框之前调用的回调函数。
onOpenEnd	Function	null	在模态框打开后调用的回调函数。
onCloseStart	Function	null	在关闭模态框之前调用的回调函数。
onCloseEnd	Function	null	关闭模态后调用的回调函数。
onSelect	Function	null	当选择一个时间时的回调函数，第一个参数是小时，第二个参数是分钟。

时间选择器国际化选项

在i18n选项中使用这些来本地化时间选择器。

键	文本
cancel	'Cancel'
clear	'Clear'
done	'Ok'

属性

名称	类型	描述
el	Element	插件初始化时使用的输入元素。
options	Object	初始化实例时使用的选项。
isOpen	Boolean	选择器是否处于打开状态。
time	String	所选时间。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以得到插件实例如下：


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

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

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

.open();

打开时间选择器


instance.open();

.close();

关闭时间选择器


instance.close();

.showView();

在时间选择器上显示小时或分钟视图

参数

String: 要切换到的视图的名称，“hours”或“minutes”。


instance.showView('hours');

.destroy();

销毁插件实例并回收


instance.destroy();

日期选择器
时间选择器