菜单

日期选择器

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


  <input type="text" class="datepicker">
初始化

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

  // Or with jQuery

  $(document).ready(function(){
    $('.datepicker').datepicker();
  });
选项
名称 类型 默认值 说明
autoClose 布尔值 false 选择日期后自动关闭选择器。
format 字符串 'mmm dd, yyyy' 输入字段值对应的日期输出格式。
parse 函数 null 用于从当前输入字符串创建日期对象。
defaultDate 日期 null 首次打开时要查看的初始日期。
setDefaultDate 布尔值 false 将 defaultDate 设置为初始选定值。
disableWeekends 布尔值 false 防止选择周末的任何日期。
disableDayFn 函数 null 自定义函数，用于禁用某些日期。
firstDay 数字 0 一周的第一天（0：星期日，1：星期一，依此类推）。
minDate 日期 null 可以选择的最早日期。
maxDate 日期 null 可以选择的最晚日期。
yearRange 数字 || 数组 10 两侧的年数，或上限/下限范围数组。
isRTL 布尔值 false 将日期选择器更改为 RTL。
showMonthAfterYear 布尔值 false 在日期选择器标题中显示月份（在年份之后）。
showDaysInNextAndPreviousMonths 布尔值 false 渲染落在下一个或上一个月份的日历网格日期。
container 元素 null 指定一个 DOM 元素来渲染日历，默认情况下它将放置在输入之前。
showClearBtn 布尔值 false 在日期选择器中显示清除按钮。
i18n 对象 请参阅 i18n 文档。 国际化选项。
events 数组 [] 由 `Date.toDateString()` 返回的字符串数组，指示指定日期中有事件。
onSelect 函数 null 选择日期时的回调函数，第一个参数是新选择的日期。
onOpen 函数 null 打开日期选择器时的回调函数。
onClose 函数 null 关闭日期选择器时的回调函数。
onDraw 函数 null 刷新日期选择器 HTML 时调用的回调函数。
日期格式选项

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

键 说明 输出
d 本月日期。 1-31
dd 本月日期（2 位数字）。 01-31
ddd 由 i18n 选项设置的简写形式的星期几。 星期日-星期六
dddd 由 i18n 选项设置的完整形式的星期几。 星期日-星期六
m 月份。 1-12
mm 月份（2 位数字）。 01-12
mmm 由 i18n 选项设置的简写形式的月份。 1 月-12 月
mmmm 由 i18n 选项设置的完整形式的月份。 一月-十二月
yy 2 位数年份。 17
yyyy 4 位数年份。 2017
日期选择器国际化选项

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

键 文本
cancel '取消'
clear '清除'
done '确定'
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 元素 用于初始化插件的输入元素。
options 对象 用于初始化实例的选项。
isOpen 布尔值 如果选择器已打开。
date 日期 所选日期。
方法

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以像这样获取插件实例


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

打开日期选择器


instance.open();

.close();

关闭日期选择器


instance.close();

.toString();

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


instance.toString();

.setDate();

在日期选择器上设置日期

参数

日期（可选）：要设置在日期选择器上的日期。


instance.setDate(new Date());

.gotoDate();

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

参数

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


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);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.timepicker').timepicker();
  });
选项
名称 类型 默认值 说明
duration 数字 350 从/到小时/分钟视图的过渡持续时间。
container 字符串 null 指定一个 DOM 元素的选择器以在其中呈现日历，默认情况下它将放置在输入之前。
showClearBtn 布尔值 false 在时间选择器中显示清除按钮。
defaultTime 字符串 'now' 在时间选择器上设置的默认时间为“现在”或“13:14”
fromNow 数字 0 从 defaultTime 开始的毫秒偏移量。
i18n 对象 请参阅 i18n 文档。 国际化选项。
autoClose 布尔值 false 分钟选择后自动关闭选择器。
twelveHour 布尔值 true 使用 12 小时制 AM/PM 时钟，而不是 24 小时制时钟。
vibrate 布尔值 true 拖动时钟指针时使设备振动。
onOpenStart 函数 null 在模态打开之前调用的回调函数。
onOpenEnd 函数 null 在模态打开之后调用的回调函数。
onCloseStart 函数 null 在模态关闭之前调用的回调函数。
onCloseEnd 函数 null 在模态关闭之后调用的回调函数。
onSelect 函数 null 选择时间时的回调函数，第一个参数是小时，第二个参数是分钟。
时间选择器国际化选项

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

键 文本
cancel '取消'
clear '清除'
done '确定'
属性
名称 类型 说明
el 元素 用于初始化插件的输入元素。
options 对象 用于初始化实例的选项。
isOpen 布尔值 如果选择器已打开。
time 字符串 所选时间。
方法

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以像这样获取插件实例


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

打开时间选择器


instance.open();

.close();

关闭时间选择器


instance.close();

.showView();

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

参数

字符串：要切换到的视图的名称，“小时”或“分钟”。


instance.showView('hours');

.destroy();

销毁插件实例并进行清理


instance.destroy();