AngularJS: поле ввода с датой

Question

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

У меня есть табель, который должен выглядеть следующим образом:

From | To | Pause | Hours 
    [08:00] [17:30] [01:00] 08:30 

Значение в скобках (08:00, 17:30, 01:00) являются полями ввода, часы должны быть вычисленным значением.

Так что это моя форма:

<div ng-repeat="t in timesheetCurrentMonth"> 
    From: <input type="text" ng-model="t.from"/> <!-- e.g. 08:00 --> 
    To: <input type="text" ng-model="t.to"/> <!-- e.g. 17:30 --> 
    Pause:<input type="text" ng-model="t.pause"/><!-- e.g. 01:00 --> 

    Working hours:<span>{{t.to-t.from-t.pause|hhmm}}</span> <!-- e.g. 08:30 --> 
</div> 

Так как я могу ввести значение даты в TextFields как '08: 30' и рассчитать общее количество рабочих часов?

Я думал о вычислении с минимальными значениями (08:00 = 480) в модели, потому что я сохраню эти данные в виде минутных значений в базе данных и сделает вычисления простыми (от-до-паузы). Имеет ли это смысл? BTW, у меня есть фильтр, который преобразует минутные значения в формат HH: mm.

Спасибо, Бернхард

PS: Вот функция, которая преобразует минут (например, 480) к HH: MM (строка 08.00).

var convertToHourString = function(min, alwaysShowMinutes) { 
    var hours = Math.floor(min/60); 
    var minutes = min % 60; 
    if (minutes === 0 && !alwaysShowMinutes) 
     return hours; 
    return hours + ":" + (minutes < 10 ? "0" + minutes : minutes); 
}; 

Answer 1

Хорошо, я нашел это сам.

Это был вопрос. «Итак, как я могу рассчитать общее рабочее время?»

<span>{{calcWorkingHours(t.to, t.from, t.pause)|hhmm}}</span> 

Область применения: от = 08: 00, в = 17: 30, пауза = 01: 00

So переменные, из и паузы будут преобразованы в значения минут, рабочее время будет (снова как минутное значение) и выводится с использованием фильтра ('hhmm'), который преобразует sth. как 510 (минуты) до '08: 30 'часов.

Answer 2

Я бы сделал математику внутри вашего контроллера как рассчитанное свойство. Вам нужно будет создать новую Date() со строками, которые передаются, прежде чем вы сможете выполнить математику.

Вот краткий пример: https://jsfiddle.net/khpfvo1u/

var start = new Date('2015-05-20 08:30:00'); 
var end = new Date('2015-05-20 15:30:00'); 

var result = (end - start)/1000/60/60; 
alert(result); 

Как сказал Майкл, momentJS даст вам гораздо более богатые функциональные возможности для ничего общего с датами. Если у вас есть что-то сверх простой математики, вероятно, стоит ввести зависимость.

Answer 3

momentJs предоставляет все необходимые вам операции времени и времени.