我正在使用JQuery countdown我在处理事件时遇到问题。
这是跨度:
<div class="col-sm-2">
<label>Tempo Restante</label>
<span class="remaining-time"></span>
</div>
这是js:
$(document).ready(function() {
var d;
var t;
var expirationTime;
$("#PedidoDateFimData").change(function() {
var d = $("#PedidoDateFimData").val();
var t = $("#PedidoDateFimHour").val();
var parsedTime = t.split(':');
expirationTime = parseSlashDate(d);
expirationTime.setHours(parsedTime[0]);
expirationTime.setMinutes(parsedTime[1]);
});
$("#PedidoDateFimHour").change( function() {
d = $("#PedidoDateFimData").val();
t = $("#PedidoDateFimHour").val();
var parsedTime = t.split(':');
expirationTime = parseSlashDate(d);
expirationTime.setHours(parsedTime[0]);
expirationTime.setMinutes(parsedTime[1]);
});
$(".remaining-time").countdown({until: expirationTime, format: "dHMS", compact: true});
}
这是 parseSlashDate 函数:
function parseSlashDate(input) {
var parts = input.split('/');
// new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[2], parts[1], parts[0]);
}
“PedidoDateFimData”是以下巴西格式的 Bootstrap 日期选择器:
$('.datepicker').datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
keyboardNavigation: true,
// startDate: new Date()
});
“PedidoDateFimHour”是正常时间字段(例如“23:32”)。
如果我使用 setInterval,我会不断收到“无效日期”,即使我没有收到,倒计时也不起作用。如何使用 JQuery 倒计时开始计算 Bootstrap 日期选择器中“更改”事件后的剩余时间?
这是缺失的数据:
<div class="col-sm-2">
<label>Vencimento (Prazo)</label>
<input name="data[Pedido][date_fim_data]" placeholder="* Ex: 31/06/2013" type="text" id="PedidoDateFimData" class="datepicker ttip" title="Informe a Data e hora finais do prazo para a entrega do seu Pedido" required="required">
</div>
<div class="col-sm-2">
<label>Horário</label>
<input name="data[Pedido][date_fim_hour]" placeholder="* hh:mm" type="text" id="PedidoDateFimHour" class="hora" required="required">
</div>
最佳答案
我手头没有你的完整代码。
1) 两个 $('.').change 方法具有相同的代码。我只是将它们放在一起作为 update()。
2)我在时间字段上添加了未定义的检查。
3) 您不必自己解析日期。 JQ $('.datepicker').datepicker('getDate') 将为您完成此操作。
function update() {
var expirationTime = $("#PedidoDateFimData").datepicker("getDate"),
t = $("#PedidoDateFimHour").val(),
parsedTime = t.split(':');
if (parsedTime.length == 2) {
expirationTime.setHours(parsedTime[0]);
expirationTime.setMinutes(parsedTime[1]);
}
$('.remaining-time').countdown({until: expirationTime, format: 'dHM'})
}
$(document).ready(function() {
$("#PedidoDateFimData").change(update);
$("#PedidoDateFimHour").change(update);
});
$('.datepicker').datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
keyboardNavigation: true,
// startDate: new Date()
});
关于javascript - 如何使用 JQuery 倒计时从 Bootstrap 日期选择器中开始计算 "change"事件后的剩余时间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34420216/