我正在使用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”是具有以下巴西格式的引导日期选择器:

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


“ PedidoDateFimHour”是正常时间字段(例如“ 23:32”)。

如果使用setInterval,我会不断收到“无效日期”,即使我没有得到,倒计时也不起作用。如何使用JQuery倒数开始对Bootstrap Datepicker的“ change”事件之后的剩余时间进行计数?

这是缺少的数据:

              <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 Datepicker的“change”事件之后的剩余时间进行计数?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34420216/

10-13 02:15
查看更多