为什么时间选择器在选择非今天的日期时不能降级？

Question

我的 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/

如果我单击时间选择器并单击递减小时图标，它不起作用。我知道它会发生，因为这段代码：minDate: moment().startOf('minute').add(300, 'm')。我希望代码仅在这一天有效。除了今天，代码不起作用

我该怎么做？

Answer 1

如果您只想将输入限制为今天，为什么要尝试在 time 选择器上设置限制？您应该在日期选择器

上设置限制

Answer 2

你的#datepicker和#timepicker无关，他们完全独立， 与他们建立联系 取决于你。您可以使用 minDate 函数动态设置 minDate of #timepicker。

您可以为 dp.change event and enable or disable the minDate for the #timepicker chceking if the selected day is current day (using 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).

与所选日期的关系

为什么时间选择器在选择非今天的日期时不能降级？

Why timepicker can not be downgraded when choosing a date other than today?

javascript

jquery

datetimepicker

twitter-bootstrap

eonasdan-datetimepicker