Boostrap日期选择器不会在每个更改事件上更新

Question

I am trying to change the to date on select from date . But it's not updating on each change , working only first time.

This is my code

<div class="control-group">
<label class="control-label wth-auto" for="txt_from_date">From<span class="star">*</span></label>
<div class="controls">
    <div class="input-append date dp1" data-date-format="yyyy-mm-dd" data-date="">
        <input class="span5 lms_datepicker" data-date-format="yyyy-mm-dd" name="txt_from_date"  readonly="" value="<?php echo date('d/m/Y') ?>" placeholder="<?php echo date('d/m/Y') ?>" size="26" type="text" id="txt_from_date">
        <span class="add-on">
            <i class="icon-calendar"></i>
        </span>
    </div>
    <div class="input-append date lms_datepicker" data-date-format="yyyy-mm-dd" data-date="">
        <input class="span5 lms_datepicker" data-date-format="yyyy-mm-dd" name="txt_to_date"  readonly="" value="<?php echo date('d/m/Y') ?>" placeholder="<?php echo date('d/m/Y') ?>" size="26" type="text" id="txt_to_date">
        <span class="add-on">
            <i class="icon-calendar"></i>
        </span>
    </div>

</div>

$('.lms_datepicker').datepicker({});
$("#txt_from_date").on("changeDate", function(e) {
 var nowDate = new Date($(this).val());
 var now = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
 $('#txt_to_date').datepicker('remove');
 $("#txt_to_date").datepicker({
        onRender:  function(date) {
            return date.valueOf() < now.valueOf() ? 'disabled old' : '';
        } });
  });

Please suggest where it is wrong.

Thanks in advance.

Answer 1

You cannot create datepicker by class this way, only a single datepicker object will be created, you need to iterate through the classes and create a datepicker for each DOM object, then use the datepicker setDate function to set the date for the needed datepicker by selecting the DOM object:

          $('.lms_datepicker').each(function(){
                $(this).datepicker();
            });

            $("#txt_from_date").on("change", function(e) {

             var nowDate = new Date($(this).val());
             var now = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
             $('#txt_to_date').datepicker("setDate",now);

       // <<<<<<<<<<<<<<<<<<<<<<<<<<<<< let it start form the date chosen in 
       //from all previous dates will be disabled 
       $('#txt_to_date').datepicker( "option", "minDate", nowDate);

        // <<<<<<<<<<<<<<<<<<<<<< Edit - disable the from datepicker
        $(this).datepicker( "option", "disabled", true );

            });