OnSelect Datepicker in Materialize to set Max Date + 9 between two inputs Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of OnSelect Datepicker in Materialize to set Max Date + 9 between two inputs without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have two inputs between from date and to date, I want to set maxDate is 9 days reference first input. I use Materialize the latest version.

Example: when I select 1 August 2018 maxDate in id="to" is 10 August 2018

Here is my HTML

<input type="text" class="datepicker" id="from" value="from">
<input type="text" class="datepicker" id="to" value="to">

and my JS

$('#from').datepicker({
  autoClose : true,
  onSelect: function() {
    var minDate = $(this).setDate(new Date() + 9);
    $("#to").datepicker("option", "minDate", minDate)
   }
});
$("#to").datepicker({
  autoClose : true,
  onSelect: function() {
    var maxDate = $(this).setDate(new Date() - 9);
    $("#from").datepicker("option", "maxDate", maxDate)
  }
})

I create onSelect like that is not working. I using Materialize, but stack here. Anybody help? thank you.. Demo: https://jsfiddle.net/dedi_wibisono17/rt9780xs/58/

Answer

You should change your onSelect() to this :

onSelect: function() {

       var toYear = this.date.getFullYear();
       var toMonth = this.date.getMonth();
       var toDay = this.date.getDate();
       maxDate = new Date(toYear, toMonth, toDay + 9);

       $("#to").datepicker({
          format : 'dd mmm yyyy',
          defaultDate: maxDate,
          setDefaultDate:maxDate
       })
}

here is the solution : jsfiddle

We are here to answer your question about OnSelect Datepicker in Materialize to set Max Date + 9 between two inputs - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji