结束日期>开始日期日期选择器Javascript不起作用

Question

I want the date picker to display the values greater than start date only. I have gone through many such examples but none explained why my code is not working. :-/

Here are my JS & HTML snippets:

 var start; $(document).ready(function() { $('#s_dt').datepicker({ startDate: new Date(), daysOfWeekDisabled: [0, 6], onSelect: function(date) { start = new Date(date); } }) .on('changeDate', function(ev) { $('#s_dt').datepicker('hide'); }); $('#e_dt').datepicker({ startDate: start, daysOfWeekDisabled: [0, 6], }) .on('changeDate', function(ev) { $('#e_dt').datepicker('hide'); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script> <div class="form-group"> <label class=" col-sm-3" for="title">Start Date</label> <div class="col-sm-9"> <input type='text' class="form-control startdate" id="s_dt" placeholder="Start Date" name="s_dt" /> </div> </div> <div class="form-group"> <label class="col-sm-3" for="title">End Date</label> <div class="col-sm-9"> <input type='text' class="form-control startdate" id="e_dt" placeholder="End Date" name="e_dt" /> </div> </div> 

Answer 1

 var start; $('#s_dt').datepicker({ startDate: new Date(), daysOfWeekDisabled: [0, 6], onSelect: function(date) { start = new Date(date); var selectedDate = $(this).datepicker("getDate"); var today = new Date().valueOf(); if (selectedDate.valueOf() < today) { $(this).val(""); } } }) $('#e_dt').datepicker({ setStartDate: new Date(), daysOfWeekDisabled: [0, 6], onSelect: function(date) { start = new Date(date); var s_date = $('#s_dt').datepicker("getDate"); var selectedDate = $(this).datepicker("getDate"); if (selectedDate.valueOf() < s_date) { $(this).val(""); } } }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" /> <div class="form-group"> <label class=" col-sm-3" for="title">Start Date</label> <div class="col-sm-9"> <input type='text' class="form-control startdate" id="s_dt" placeholder="Start Date" name="s_dt" /> </div> </div> <div class="form-group"> <label class="col-sm-3" for="title">End Date</label> <div class="col-sm-9"> <input type='text' class="form-control startdate" id="e_dt" placeholder="End Date" name="e_dt" /> </div> </div> 

Bind all condition on onSelect inbuilt option of date-picker.

Answer 2

The example below shows the end date as 1 day after the start date. You can make the end date by adding whatever number to end variable in end.setDate(st.getDate()+1);

$(document).ready(function() {
        var start = new Date();
        var end = new Date();

        $("#s_dt").datepicker({
            startDate: start,
            daysOfWeekDisabled: [0, 6],
        })
        $("#s_dt").on('changeDate', function() {
            var st = new Date($("#s_dt").val());
            var end = new Date(st);
            end.setDate(st.getDate()+1);
            end.toLocaleDateString();

            $("#e_dt").datepicker({
                startDate: end,
                daysOfWeekDisabled: [0, 6],
            })

        })
          //basically this clears out the datepicker when you clear out the end date to select a new date. 
        $("#e_dt").on('changeDate',function(){
            $('#e_dt').datepicker("remove");
        })

    })