创建使用自举-日期选择器

我需要通过https://github.com/uxsolutions/bootstrap-datepicker所以在第一日期选择器选择的该日期将被用作第二的开始日期使用日期选择器创建两个日期选取器依赖性datepickers。第一个日期选择器之前的日期在第二个禁用。创建使用自举-日期选择器

的HTML代码中的第一个日期选取器：

<div class="col-sm-6 row-margin" id="div-last-day"> 
<div class="input-group date"> 
<input type="text" class="test-width form-control input-xs" name="last-day-worked" id="last-day" placeholder="Select your last Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>

二日期选择器：

<div class="col-sm-6 row-margin" id="div-separation-day"> 
    <div class="input-group date"> 
     <input type="text" class="test-width form-control input-xs" name="separation-day-worked" id="separation-day" placeholder="Select your Separation Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span> 
</div> 
    </div>

下面是我的一些代码：

$("#div-last-day .input-group.date").datepicker({ 
      format: "dd-M-yyyy", 
      todayHighlight: true, 
      autoclose: true, 
     }); 
     $('#div-last-day .input-group.date').datepicker() 
     .on('changeDate', function (e) { 
      var lastdate = $('#div-last-day .input-group.date').datepicker('getDate'); 
      var date = new Date(lastdate); 
      var curr_date = date.getDate(); 
      var curr_month = date.getMonth(); 
      var curr_year = date.getFullYear(); 
      perfect_date = curr_date + "-" + m_names[curr_month] 
      + "-" + curr_year; 
      $("#div-separation-day .input-group.date").datepicker({ 
       format: "dd-M-yyyy", 
       todayHighlight: true, 
       startDate: perfect_date, 
       autoclose: true, 
      }); 
     });

H ere是我正在处理的小提琴https://jsfiddle.net/5tpn12L8/

小提琴第一次工作，但当我在第一个日期选择器中更改日期时，它不更新第二个日期选择器。

来源

2017-04-06 Jyotirmaya Prusty

2个datepickers如何依赖？ – Pawan

第二日期选择器允许日期仅从第一个所选择的日期。 –

用你能做到这一点，如下：

HTML：

<input class="form-control" id="txtFromDate" /> 
<input class="form-control" id="txtToDate" />

JQUERY：

$(document).ready(function() { 
    $("#txtFromDate").datepicker({ 
     format: 'dd/mm/yyyy', 
     autoclose: 1, 
     //startDate: new Date(), 
     todayHighlight: false, 
     //endDate: new Date() 
    }).on('changeDate', function (selected) { 
     var minDate = new Date(selected.date.valueOf()); 
     $('#txtToDate').datepicker('setStartDate', minDate); 
     $("#txtToDate").val($("#txtFromDate").val()); 
     $(this).datepicker('hide'); 
    }); 

    $("#txtToDate").datepicker({ 
     format: 'dd/mm/yyyy', 
     todayHighlight: true, 
     //endDate: new Date() 
    }).on('changeDate', function (selected) { 
     $(this).datepicker('hide'); 
    }); 
});

jsfiddle DEMO

来源

2017-04-06 10:38:56 Pawan

明白了..工作的感谢。 –

欢迎.....;） – Pawan

实际上timepicker都有自己的文档，你可以为

$('#timepicker_input').datetimepicker({ 
    format: "dd-M-yyyy", 
    todayHighlight: true, 
    autoclose: true, 
    onSelect: function(dateText, inst){ 
     //here perform the change you want 
    } 
});

来源

2017-04-06 10:30:51

创建使用自举-日期选择器

回答

相关问题