Question

<div class="col-md-5 no-padding">
    <div class="input-group date form_datetime_from col-md-12" id="leavefromdate" data-date="2015-01-01 05:25" data-link-field="leavefrom">
        <input class="form-control" type="text" value="" readonly>  <span class="input-group-addon success"><span class="glyphicon glyphicon-th"></span></span>
    </div>
    <input type="hidden" id="leavefrom" name="ApplyLeave[leavefrom]" value="" />
    <br/>
</div>  <span class="col-md-2 no-padding" style="float:left;line-height:35px;text-align:center">To</span>

<div class="col-md-5 no-padding">
    <div class="input-group date form_datetime_to col-md-12" id="leavetodate" data-date="" data-date-format="yyyy-mm-dd H:i" data-link-field="leaveto">
        <input class="form-control" type="text" value="" readonly>  <span class="input-group-addon success"><span class="glyphicon glyphicon-th"></span></span>
    </div>
    <input type="hidden" id="leaveto" name="ApplyLeave[leaveto]" value="" />
    <br/>
</div>

即时通讯使用此datetimepicker http://www.malot.fr/bootstrap-datetimepicker/demo.php

我的jquery代码id

$(".form_datetime_from").datetimepicker({
    format: 'yyyy-mm-dd hh:ii',
    autoclose: true,
    //linkField: "leaveto",
}).on('changeDate', function (ev) {
    $("#leaveto").val($("#leavefrom").val());
    $("#leavetodate").attr('data-date', $("#leavefrom").val());
});

//日期选择器2

$(".form_datetime_to").datetimepicker({
    //setStartDate: '2012-01-01',
    format: 'yyyy-mm-dd hh:ii',
    autoclose: true,
    startDate: "leavefrom",
});

我想设置第二个datetimepicker的最小日期是第一个datetimepicker值。用户也可以只在第一个datetimepicker中选择日期，而不能在日期之前和之后选择

Answer 1

要仅选择日期，您必须将minview设置为2

$('.form_datetime_from').datetimepicker({
                 format: 'yyyy-mm-dd',
                 autoclose: true,
                 minView: 2,

           });

Answer 2

您可以执行以下操作：

 $( ".form_datetime_from" ).datetimepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".form_datetime_to" ).datetimepicker( "option", "minDate", selectedDate );
}
});
$( ".form_datetime_to" ).datetimepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".form_datetime_from" ).datetimepicker( "option", "maxDate", selectedDate );
}
});

基本上，当第一个日期选择器关闭时，您必须在那时为第二个日期选择器设置最小日期。

查看另一个jquery example。

第二个Datetimepicker仅选择第一个datetimepicker选择的日期

2 个答案: