AngularJS: input field with date

Question

I guess, this is some beginner question, but I don't know, what to search for.

I have a timesheet which should look like this:

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

The values in brackets (08:00, 17:30, 01:00) are input fields, the hours should be a calculated value.

So this is my form:

<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>

So how can I enter date values into the textfields like '08:30' and calculate the total working hours?

I was thinking about calculating with minute values (08:00 = 480) in the model, because I will persist these data as minute values in the database and it makes the calculation simple (to-from-pause). Does that make sense? BTW, I do have a filter, that converts minute values into the HH:mm format.

Thanks, Bernhard

PS: Here's a function that converts minutes (like 480) to an HH:MM string (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);
};

Michael · Accepted Answer · 2015-05-20 17:56:47Z

3

momentJs provides all the date/time operations and convertions you need.

answered May 20, 2015 at 17:56

Michael

3,1141 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rgthree Over a year ago

This provides no insight into how to solve the OPs problem and, holy mother, do I hope one does not include an entire date library to do simply arithmetic.

Bernie Over a year ago

Thanks for your comment. rgthree is right here, this is not about converting times, as I already have the time operations (posted in the PS). I'm just looking for the Angular way to do my operations, i.e. I update the 'from' value, and the 'working hours' are calculated right away.

Keith Rousseau · Accepted Answer · 2015-05-20 18:02:31Z

1

I would do the math inside of your controller as a calculated property. You will need to create a new Date() with the strings that are being passed in before you can do the math.

Here's a quick example: 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);

Like Michael said, momentJS will give you far richer functionality for anything to do with dates. If you have anything beyond very simple math it's probably worth introducing the dependency.

edited May 20, 2015 at 18:02

answered May 20, 2015 at 17:55

Keith Rousseau

4,4931 gold badge24 silver badges28 bronze badges

Comments

Bernie · Accepted Answer · 2015-05-20 21:24:32Z

0

Ok, I've found it out by myself.

That was the question. "So how can I calculate the total working hours?"

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

Scope: from=08:00, to=17:30, pause=01:00

So the variables to, from and pause will be converted into minute values, the working hours will be calculated (again as minute value) and outputted using a filter ('hhmm'), which converts sth. like 510 (minutes) into '08:30' hours.

answered May 20, 2015 at 21:24

Bernie

1,6511 gold badge18 silver badges33 bronze badges

Collectives™ on Stack Overflow

AngularJS: input field with date

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related