Date pick "from" and "to" work for the first time, but when I change the date "from", the date "to" is not working.

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

HTML

<th>From: <input type="text" class="from span2" value="" id="from"></th>
<th>To: <input type="text" class="to span2" value="" id="to"></th>

Script

var from = $('.from').datepicker({autoclose: true}).on('changeDate', function(e){           

    $('.to').datepicker({autoclose: true, startDate: e.date })

});      

Here's my code / First try it works perfect, I choose FROM = 07/03/2013, and Date TO disabled 07/02/2013, 07/01/2013.. and so on... but again if i change date FROM = 06/10/2013, it did not disabled Date TO

Date pick "from" and "to" work for the first time, but when I change the date "from", the date "to" is not working.

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

HTML

<th>From: <input type="text" class="from span2" value="" id="from"></th>
<th>To: <input type="text" class="to span2" value="" id="to"></th>

Script

var from = $('.from').datepicker({autoclose: true}).on('changeDate', function(e){           

    $('.to').datepicker({autoclose: true, startDate: e.date })

});      

Here's my code http://jsfiddle/britonet/VS2zS/2/ First try it works perfect, I choose FROM = 07/03/2013, and Date TO disabled 07/02/2013, 07/01/2013.. and so on... but again if i change date FROM = 06/10/2013, it did not disabled Date TO

• javascript
• jquery
• datepicker

Share Improve this question Follow edited Jul 26, 2013 at 10:07 timmy asked Jul 26, 2013 at 2:54 timmytimmy 8111 gold badge44 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The problem is that the $('.to').datepicker is not initialized. JSFIDDLE is very simple fiddle to set from and to date ranges.

Updating for new :

Following code sets new start date :

var from = $('.from').datepicker({ autoclose: true }).on('changeDate', function(e){
$('.to').datepicker({ autoclose: true}).datepicker('setStartDate', e.date).focus();
});

FIDDLE.

You need to initialize both datepickers and change the start date for the second one after picking a date in the first one:

var to = $('.to').datepicker({ autoclose: true });
var from = $('.from').datepicker({ autoclose: true }).on('changeDate', function(e){
    to.startDate = e.date;
});

your .to should be outside your onchange. something like this,

var from = $('.from').datepicker({autoclose: true}).on('changeDate', function(e){           

});    

var to $('.to').datepicker({autoclose: true, startDate: e.date });

here is working code. the code will set the starDate to todays date. and the endDate will start a day after startDate. If startDate is changed, it will dynamically change the enddate, this way users can't select a date before startDate

the HTML:

From: <input type="text" class="from span2" value="" id="from"></th>
To: <input type="text" class="to span2" value="" id="to">

The JQuery:

var _startDate = new Date(); //todays date
var _endDate = new Date(_startDate.getTime() + (24 * 60 * 60 * 1000)); //plus 1 day
$('#from').datepicker({
  format: 'mm/dd/yyyy',
  autoclose: true,
  startDate: _startDate,
  todayHighlight: true
}).on('changeDate', function(e){
    _endDate = new Date(e.date.getTime() + (24 * 60 * 60 * 1000)); //get new end date
    $('#to').datepicker('setStartDate', _endDate).focus(); //dynamically set new start date for #to
    });

$('#to').datepicker({
  format: 'mm/dd/yyyy',
  autoclose: true,
  startDate: _endDate,
  todayHighlight: false
});

HERE IS THE FIDDLE

For more information on Eternicode's bootstrap datepicker, click here