在bootstrap datepicker中设置mindate

时间:2016-07-28 09:13:22

标签: javascript jquery datepicker

我有2个日期选择器更改第1个日期选择器我需要将所选日期设置为第2个日期选择器的注意值。这是我的系数

<input type="text" size="30" class="date_picker_from form-control valid" id="start" value="" name="start" aria-invalid="false">

<input type="text" size="30" class="date_picker_to form-control valid" id="end" value="" name="end" aria-invalid="false">


$('.date_picker_from').datepicker({
    setDate: new Date(),
     format: 'dd/mm/yyyy',
    todayHighlight: true,
  autoclose:true,
  startDate: '-0m',
  minDate:0,

});

$('.date_picker_to').datepicker({
    //setDate: new Date(),
    format: 'dd/mm/yyyy',
    todayHighlight: true,
  autoclose:true,
  startDate: '+1d',
  minDate:0,

});

$("#start").change( function() {


var secondDate = new Date($("#start").datepicker( "getDate" ));

var date2 = new Date(secondDate.getTime());


date2.setDate(date2.getDate() + 1);
   $("#end").datepicker("setDate", date2);
    $("#end").datepicker("minDate", date2);
     $('#end').datepicker( "option", "minDate", date2 );


});

以下是jsfiddle链接

2 个答案:

答案 0 :(得分:2)

这只是你需要为设置思想做的事情。这是使用datepicker设置思维的方法。

$("#start").change( function() {    
   $( ".date_picker_hotel_to" ).datepicker("option", "minDate", $("#start").val());   
 });

答案 1 :(得分:0)

使用onSelect回调选项

$('.date_picker_hotel_from').datepicker({
  setDate: new Date(),
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
  startDate: '-0m',
  minDate: 0,
  onSelect: function(text, dt) {
    $('#end').datepicker('option', 'minDate', text);
  }
});

$('.date_picker_hotel_to').datepicker({
  //setDate: new Date(),
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
  startDate: '+1d',
  minDate: 0,

});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<input type="text" size="30" class="date_picker_hotel_from form-control valid" id="start" value="" name="start" aria-invalid="false">

<input type="text" size="30" class="date_picker_hotel_to form-control valid" id="end" value="" name="end" aria-invalid="false">