How to set min and max time for Materialize Time Picker

Question

I am using materializecss for my project. I have inserted Time Picker. Here i want to set the min and max time dynamically using JS.

For Datepicker

$('.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
});

Is working fine.

For TimePicker

$('.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(){}
});

Also i tried

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

But didn't helped.

Answer 1

Well, i faced the same issue in my project, and found out that materialize doesn't have this feature yet,

So the only way possible is to edit the official Materialize CSS and JS files

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

Refer this pen for 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>

Refer this pen for datepicker : Materialize Datepicker range CodePen by Dreamh

replace/ add these CSS and JS from the pen to your project, and do change the min/ max time and date range.

Hope this solves your problem. 😃