2015-10-02 3 views
0

Надеюсь, что кто-то может помочь мне здесь. У меня есть форма, где мне нужен пользователь, чтобы ввести время начала и время окончания инцидента. Как только они вводят информацию, она вручную вводит продолжительность между двумя датами. Я пытаюсь автоматизировать этот процесс с помощью jquery и получил аддон, называемый моментами http://momentjs.com/. Я надеялся, что это упростит для меня вычисление 2 дат, но я должен признать, что я не очень разбираюсь в jquery javascript, чтобы понять, как он собирается собраться вместе.Рассчитать количество часов и минут между 2 датой и временем

На стороне записки также нужно, чтобы поле длительности было рассчитано только в том случае, если оно пустое. Я создал jsfiddle http://jsfiddle.net/FLhpq/2044/. Это было бы самым близким, я мог бы попытаться воспроизвести мой сценарий. Вот код, который у меня был до сих пор.

$(document).ready(function() { 
    var start_time = $('input[title="start time"]').val(); 
    var end_time = $('input[title="End time"]').val(); 
    var d1 = moment(start_time, "YYYY-MM-DD HH:mm"); 
    var d2 = moment(end_time, "YYYY-MM-DD HH:mm"); 
    var duration = d2.diff(d1, 'hours')+1; 
    var input = $('input[title="duration"]').val(); 
    if(input == ''){ 
     $('#duration').val('duration'); 
});  
+0

Может быть, ответ здесь поможет? http://stackoverflow.com/questions/13903897/javascript-return-number-of-days-hours-minutes-seconds-between-two-dates (возможный дубликат?) –

+0

Возможная Дубликат [Get разность времени между двумя датами в секундах] (http://stackoverflow.com/questions/13894632/get-time-difference-between-two-dates-in-seconds) – ochi

ответ

2

Вы имеете право расчета я считаю. Я думаю, что это просто визуальное исполнение.

Я собрал следующую скрипку для того, что, как я думаю, вы пытаетесь сделать; jsfiddle.net/....

$(document).ready(function() { 
     var start_time = $('.start').val(), 
     end_time = $('.end').val(), 
     d1 = moment(start_time, "YYYY-MM-DD HH:mm"), 
     d2 = moment(end_time, "YYYY-MM-DD HH:mm"), 
     duration = d2.diff(d1, 'hours') + 1, 
     $input = $('.duration'); 
     if ($input.val() === ''){ 
     $input.val(duration); 
     } 
    }); 

В вашей оригинальной скрипке. Не было элемента с идентификатором «продолжительность». Кроме того, для захвата элементов вместо этого попробуйте имена классов для селекторов. Я добавил несколько простых классов для ввода, чтобы немного схватить их с jQuery.

В этом случае, если вы хотите дополнительно отобразить минуты/секунды, вы можете изменить свою логику продолжительности, используя некоторые из встроенных функций momentjs, таких как to.

Я верю что-то вроде следующего;

duration = d1.to(d2) // RETURNS MOMENT 

Надеюсь, это поможет вам!

+0

вы также можете очеловечить входное значение: '$ input. val (moment.duration (продолжительность, «часы»). humanize()); ' –

+0

Да, конечно. Не пытайтесь улучшить реализацию для ОП.Просто дайте указателям на привязку к UI;) – jh3y

+0

Спасибо, ребята, это сработало отлично, я был близок к LOL. –

0

Вы должны смотреть на this

  var a = moment([2007, 0, 28]); 
     var b = moment([2007, 0, 29]); 
     a.to(b);      // "in a day" 

Или

  var a = moment([2007, 0, 29]); 
      var b = moment([2007, 0, 28]); 
      a.diff(b, 'days') // 1 
0

Это будет отображать часы (и минут) и отобразить его, если duration поле пусто:

$(document).ready(function() { 
    if($('#duration').val() === '') { 
     updateDuration($('#start_time').val(), $('#end_time').val()); 
    } 

    $('#start_time').on('change keyup', function() { 
     updateDuration($('#start_time').val(), $('#end_time').val()); 
    }); 

    $('#end_time').on('change keyup', function() { 
     updateDuration($('#start_time').val(), $('#end_time').val()); 
    }); 

    function updateDuration(startTime, endTime) { 
     var ms = moment(endTime, 'YYYY/MM/DD HH:mm:ss').diff(moment(startTime, 'YYYY/MM/DD HH:mm:ss')), 
      dt = moment.duration(ms), 
      h = Math.floor(dt.asHours()), 
      m = moment.utc(ms).format('mm'); 

     $('#duration').val(h + ' hours, ' + m + ' minutes'); 
    } 
}); 

Это также обновляет поле ввода duration, если пользователь изменяет значение.

Вы можете увидеть рабочую JSFiddle здесь:

http://jsfiddle.net/divspace/9x0s01oy/

Смежные вопросы