Jquery datepicker : Selecting the value for second datepicker based on first date picker

Question

First date picker

    <div class="input-group date " data-provide="datepicker">
      <input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
    </div>

Second datepicker

    <div class="input-group date" data-provide="datepicker">
      <input type="text" name="date2" class="form-control  datepicker2" placeholder="Select delivery  date">
    </div>

There are two date pickers. The value of the second date picker is based on the first one. If the user chooses today's date on first date picker then the date picker 2 will only allow choosing date starting from tomorrow.

      $(document).ready(function(){
        $('.datepicker1').datepicker( { 

            format: 'dd-mm-yyyy',
            startDate:'+0d',
            autoclose: true,

           onSelect: function(date){           
           var date1 = $('.datepicker1').datepicker('getDate');        
        var date = new Date( Date.parse( date1 ) ); 
        date.setDate( date.getDate() + 1 );        
        var newDate = date.toDateString(); 
        newDate = new Date( Date.parse( newDate ) );                      
        $('.datepicker2').datepicker("option","minDate",newDate);            
    }
        });

        $('.datepicker2').datepicker( {    
            format: 'dd-mm-yyyy',
            autoclose: true, 
            minDate:0,
        });

    });

if the user chooses 10-04-2019 in the first date picker then the user should only able to choose from 11-04-2019 in the second date picker.

this is the requirement

@ShoyebSheikh newDate has the value, But that value is not getting on datepicker2 — A.K.S, Apr 03 '19 at 05:19
you mean this statement `$('.datepicker2').datepicker("option","minDate",newDate); ` is not working ? It worked on my side though. — Shoyeb Sheikh, Apr 03 '19 at 05:27
@anand You have set the newDate value into minDate attribute of datepicker2. So minDate of datepicker2 will be a day after the selected date and it is working completely fine. — Chintan Bhatt, Apr 03 '19 at 05:27

score 4 · Answer 1 · answered Apr 03 '19 at 05:34

Just set minDate option for the second datepicker input, so that user can't select that date or set date backwards.

Check my updated snippet of your code below:

$(document).ready(function(){
    // Init first datepicker
    $('.datepicker1').datepicker( { 
      format: 'dd-mm-yyyy',
      startDate:'+0d',
      autoclose: true,
      onSelect: function(date){
        // Select next day
        var nextDay = new Date(date);
        nextDay.setDate(nextDay.getDate() + 1);
        $(".datepicker2").datepicker("option","minDate", nextDay);
      }
    });
  
    // Init second datepicker
    $('.datepicker2').datepicker( {    
        format: 'dd-mm-yyyy',
        startDate:'+0d',
        autoclose: true,
        onSelect: function(date){           
          //validate date here   
        }
    });
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicke</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
first date picker

<div class="input-group date " data-provide="datepicker">
  <input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
</div>



second datepicker

<div class="input-group date" data-provide="datepicker">
  <input type="text" name="date2" class="form-control  datepicker2" placeholder="Select delivery  date">
</div>
 
 
</body>
</html>

Jquery datepicker : Selecting the value for second datepicker based on first date picker

1 Answers1