javascript - 如何设置 Materialise 时间选择器的最短和最长时间

Question

我正在使用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]

但没有帮助。

Answer 1

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

所以唯一可能的方法是编辑官方的 Materialise 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 替换/添加到您的项目中，并更改最小/最大时间和日期范围。

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