我在我的申请中使用这个plugin。
我有两个文本框,用于datepicker的id="order_at"
和用于timepicker的id="order_time"
。
<input type="text" name="order_at" id="order_at" readonly="" value=""/>
<input type="text" name="order_time" id="order_time" value=""/>
对于datepicker,我设置文本框(order_at)的值与当前日期(因为我阻止过去的日期)。
var lastDate = new Date();
lastDate.setDate(lastDate.getDate());
$('#order_at').datepicker({
format: "yyyy-mm-dd",
autoclose: true,
minDate: 0,
startDate: '-0m'
});
$("#order_at").datepicker('setDate', lastDate);
由于我在初始化datepicker时将其值作为当前日期,因此我想阻止当前日期的过去几小时。例如,如果现在是14:00,那么时间戳将从14:00开始列出小时数。
var d = new Date();
var chDate = d.getDate();
var chMonth = d.getMonth();
var chYear = d.getFullYear();
var hour = d.getHours();
var min = d.getMinutes();
if(chDate < 10)
chDate = '0' + chDate;
if(parseInt(chMonth + 1) < 10)
chMonth = '0' + parseInt(chMonth + 1);
var currentDate = chYear + '-' + chMonth + '-' + chDate;
var modhr = (hour + 1);
if(min < 10)
var output = modhr + ':0' + min;
else
var output = modhr + ':' + min;
$("#order_time").val(output);
$('#order_time').timepicker({
'timeFormat': 'H:i',
'maxTime': '23:00',
'minTime': output
});
现在我关心的是看用户是否选择了将来的日期。在这种情况下,我需要将时间戳的minTime重置为当天的开始时间,比如06:00。
这是处理该因素的代码:
$('#order_at').on('change',function(){
if($(this).val() == currentDate)
{
$("#order_time").val(output);
$('#order_time').timepicker();
$('#order_time').timepicker({
'timeFormat': 'H:i',
'maxTime': '23:00',
'minTime': output
});
}
else
{
$('#order_time').timepicker();
$('#order_time').timepicker({
'timeFormat': 'H:i',
'maxTime': '23:00',
'minTime': '06:00'
});
}
});
但是,当oder_at文本框值更改时,小时列表不会更新。它始终显示从06:00开始的列表。
我怎样才能解决这个问题?
在做了一些研究后,我找到了一个解决方案,这个解决方案在文档中没有提到
这是初始化时间戳的方式:
$('#order_time').timepicker({
'timeFormat': 'H:i',
'maxTime': '23:00',
'minTime': output,
'step' : 20
});
现在要重新初始化特定选项,可以这样做: -
$('#id_of_object').timepicker('option', { '<the option>: '<The value you want to put>' });
所以,在我的情况下,脚本将是: -
$('#order_at').on('change',function(){
if($(this).val() == currentDate)
{
$('#order_time').timepicker('option', { minTime: output });
}
else
{
$('#order_time').timepicker('option', { minTime: '06:00' });
}
});