如何设置 Materialise Time Picker 的最小和最大时间答案

【问题标题】：How to set min and max time for Materialize Time Picker如何设置 Materialise Time Picker 的最小和最大时间
【发布时间】：2017-10-11 11:36:54
【问题描述】：

我在我的项目中使用materializecss。我已经插入了时间选择器。这里我想使用JS动态设置最小和最大时间。

对于日期选择器

$('.datepicker').pickadate({
    selectMonths: true,
    selectYears: 15,
    today: 'Today',
    clear: 'Clear',
    close: 'Ok',
    min: new Date(2017,9,20),
    max: new Date(2017,10,10),
    closeOnSelect: false
});

工作正常。

时间选择器

$('.timepicker').pickatime({
    fromnow: 0, 
    twelvehour: true,
    donetext: 'OK',
    canceltext: 'Cancel',
    minDate: new Date(2017,9,20,12,0),
    maxDate: new Date(2017,10,10,18,0),
    aftershow: function(){}
});

我也试过了

  min: [7,30],
  max: [14,0]

但没有帮助。

【问题讨论】：

标签： javascript jquery bootstrap-4 materialize

【解决方案1】：

好吧，我在我的项目中遇到了同样的问题，发现materialize还没有这个功能，

所以唯一可能的方法是编辑官方的 Materialize CSS 和 JS 文件

    <input type="text" class="timepicker" id="modified-timepicker">

请将此笔用于时间选择器：Materialize Timepicker min/ max CodePen by Dev Sware

   <div id="wrapper1" class="col s5 input-field">
     <input type="date" id="start1" class="datepicker-start" />
     <label for="start1">Start Date</label>
   </div>

   <div id="wrapper2" class="col s5 input-field">
     <input type="date" id="end1" class="datepicker-end" />
     <label for="end1">End Date</label>
   </div>

请将此笔用于日期选择器：Materialize Datepicker range CodePen by Dreamh

将这些 CSS 和 JS 从笔中替换/添加到您的项目中，并更改最小/最大时间和日期范围。

希望这能解决您的问题。 ?

【讨论】：