Question

我正在使用eonasdan的bootstrap-datetimepicker。我的页面中有两个datetimepicker。一个是抵达日期，另一个是抵达时间。

$('#dateOfArrival').datetimepicker({
    format : 'L',
    minDate : new Date(),
    keepInvalid : true
});

$('#timeOfArrival').datetimepicker({
    format : 'LT',
    minDate : moment()
});

我使用两个datetimepicker，因为这是要求。

我试图在dateOfArrival的更改上调用此函数，但没有任何更改。

function setDateOfArrivalTime() {
    $("#timeOfArrival").datetimepicker("option", "minDate", new Date($("#dateField").val());
}

这是html代码

<div class='input-group date' id='dateOfArrival'>
<input type="text" class="form-control requiredField" id="dateField" onchange="setDateOfArrivalTime();" placeholder="mm/dd/yyyy" />
<span class="input-group-addon">
  <span class="glyphicon glyphicon-calendar"></span>
</span>

<div class='input-group date' id='timeOfArrival' style="">
<input type='text' class="form-control requiredField" id="timeField"/>
<span class="input-group-addon">
   <span class="glyphicon glyphicon-time" placeholder="hh:mm"></span>
</span>

感谢任何帮助。

Answer 1

Eonasdan日期时间选择器没有<Button Text="ok"/>个事件，请改用dp.change。此外，应该使用change访问minDate之类的功能，正如文档所说：

注意所有功能都可通过.data("DateTimePicker")属性访问，例如data

这是一份工作样本：

$('#datetimepicker').data("DateTimePicker").FUNCTION()

$('#dateOfArrival').datetimepicker({
  format : 'L',
  minDate : new Date(),
  keepInvalid : true
}).on('dp.change', function(e){
  // Set timepicker value to let the timepicker work
  $("#timeOfArrival").data("DateTimePicker").date(e.date);
  $("#timeOfArrival").data("DateTimePicker").minDate(e.date);
});

$('#timeOfArrival').datetimepicker({
  format : 'LT',
  minDate : moment(),
  useCurrent: false
});

PS。我不明白为什么要根据日期选择器的值将<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <div class='input-group date' id='dateOfArrival'> <input type="text" class="form-control requiredField" id="dateField" placeholder="mm/dd/yyyy" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <div class='input-group date' id='timeOfArrival' style=""> <input type='text' class="form-control requiredField" id="timeField" placeholder="hh:mm"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div>设置为时间选择器。

如何禁用当前日期为今天的过去时间，如果日期不是今天，则启用所有时间？

1 个答案: