javascript - 如何使用 JQuery 倒计时从 Bootstrap 日期选择器中开始计算 "change"事件后的剩余时间？

Question

我正在使用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>

Answer 1

我手头没有你的完整代码。

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()
});