为什么选择比今天以外的日期时timepicker不能降级？(Why timepicker can n

我的HTML代码如下：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
            </div>
        </div>

        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
            </div>
        </div>
    </div>
</div>
<button id="btnSubmit">
    Submit
</button>

我的JavaScript代码是这样的：

$(function () {    
    $('#datepicker').datetimepicker();

    $('#timepicker').datetimepicker({
        minDate: moment().startOf('minute').add(300, 'm'),
    });
});
$("#btnSubmit").click(function() {
    value = document.getElementById('datetimepicker').value;
    console.log(value)
});

演示这样的： https://jsfiddle.net/8jpmkcr5/89/

如果我点击timepicker并单击减量小时图标，这是行不通的。我知道这是因为这样的代码： minDate: moment().startOf('minute').add(300, 'm') 我想要的代码在这一天只工作。除了今天的代码不起作用

我该怎么做？

Answer 1:

你#datepicker和#timepicker 无关，他们是完全独立的 ，是由你来联系他们。您可以设置dinamically minDate的#timepicker使用minDate功能。

您可以添加一个听者的dp.change事件，并启用或禁用minDate为#timepicker chceking如果所选一天是当前日期（用momentjs isSame ）。

你要添加minDate选项也#datepicker如果要禁用过去的日期，你的意见陈述。

在这里工作示例：

 $(function () { $('#datepicker').datetimepicker({ minDate: moment().startOf('day') }).on('dp.change', function(e){ if( e.date && e.date.isSame(moment(), 'd') ){ var min = moment().startOf('minute').add(300, 'm'); $('#timepicker').data("DateTimePicker").minDate(min); } else { $('#timepicker').data("DateTimePicker").minDate(false); } }); $('#timepicker').datetimepicker({ minDate: moment().startOf('minute').add(300, 'm'), }); }); $("#btnSubmit").click(function() { value = document.getElementById('datepicker').value; console.log(value) valueTime = document.getElementById('timepicker').value; console.log(valueTime) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" /> </div> </div> <div class='col-sm-6'> <div class="form-group"> <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" /> </div> </div> </div> </div> <button id="btnSubmit"> Submit </button>

请注意，如前所述， #datepicker和#timepicker无关，因此与#timepicker你只是选择时间，默认为当天（使用选定日期没有自动关系#datepicker ）。