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

＆＃34; PedidoDateFimData＆＃34;是以下巴西格式的bootstrap日期选择器：

$('.datepicker').datepicker({
    format: "dd/mm/yyyy",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    keyboardNavigation: true,
    // startDate: new Date()
});

＆＃34; PedidoDateFimHour＆＃34;是一个正常的时间字段（＆＃34; 23:32＆＃34;，例如）。

我一直在＆＃34;无效日期＆＃34;如果我使用setInterval，即使我没有，倒计时也不起作用。如何使用JQuery倒计时开始计算＆＃34;更改后的剩余时间＆＃34;来自引导程序Datepicker的事件？

这里缺少数据：

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

如何使用JQuery倒计时开始计算＆＃34;更改后的剩余时间＆＃34;来自引导程序Datepicker的事件？

1 个答案: