[英]How to disable past time time when the current date is today, enable all time if date is not today?
I am using bootstrap-datetimepicker by eonasdan. 我正在使用eonasdan的bootstrap-datetimepicker。 I have two datetimepicker in my page.
我的页面中有两个datetimepicker。 One is for date of arrival and the other one is for time of arrival.
一个用于到达日期,另一个用于到达时间。
$('#dateOfArrival').datetimepicker({
format : 'L',
minDate : new Date(),
keepInvalid : true
});
$('#timeOfArrival').datetimepicker({
format : 'LT',
minDate : moment()
});
I use two datetimepicker because that is the requirement. 我使用两个datetimepicker,因为这是必需的。
I tried to call this function onchange of dateOfArrival but nothing is changed. 我试图在dateOfArrival的onchange上调用此函数,但没有任何改变。
function setDateOfArrivalTime() {
$("#timeOfArrival").datetimepicker("option", "minDate", new Date($("#dateField").val());
}
Here is the html code 这是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>
Any help is appreciated. 任何帮助表示赞赏。
Eonasdan datetime picker has no change
event, use dp.change
instead. Eonasdan日期时间选择器没有
change
事件,请改用dp.change
。 Moreover function like minDate
should be accessed using .data("DateTimePicker")
, as the docs says: 此外,如
minDate
函数应使用.data("DateTimePicker")
访问,如文档所述:
Note All functions are accessed via the
data
attribute eg$('#datetimepicker').data("DateTimePicker").FUNCTION()
注意可通过
data
属性访问所有功能,例如$('#datetimepicker').data("DateTimePicker").FUNCTION()
Here a working sample: 这里是一个工作示例:
$('#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 });
<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>
PS. PS。 I do not understand why you are setting
minDate
to a time picker depending on the value of the datepicker. 我不明白为什么要根据datepicker的值将
minDate
设置为时间选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.