Javascript formatting time - Date fns

Question

I have a time that is stored in minutes as

01:30:00

I would like to display it as a nice human readable 1hr 30 minutes or 90 minutes.

What is the best way to achieve his I am using Date fns for the date but cannot get getminutes() method to work as it expects a full date.

https://date-fns.org/v1.28.0/docs/getMinutes.

"I would like to store it as"...can I suggest you continue to _store_ it like that, and then you can easily _display_ it in some different format whenever it suits. MomentJS is quite good for this kind of presentational stuff (among other useful features), e.g. http://momentjs.com/docs/#/durations/humanize/ — ADyson, Aug 01 '18 at 14:05
parse does not work? `dfn.format(dfn.parse(storedTime), 'h[h]mm')` — Pandaiolo, Aug 01 '18 at 14:17
otherwise a really nice option for easy human readable date is https://momentjs.com/ — Pandaiolo, Aug 01 '18 at 14:19
Just a thought in relation to " cannot get getminutes() method to work as it expects a full date."...can't you just arbitrarily pass in today's date for the date part? It doesn't matter, since all you want is the minutes, and that's not affected by the date, the output won't change no matter what date you enter. — ADyson, Aug 01 '18 at 14:24
The reason I did not choose moment.js is you don't seem to be able to import individual functions import {format} from 'moment' it's only 16kb I know but it all adds up. — LeBlaireau, Aug 01 '18 at 14:57

score 1 · Accepted Answer · answered Aug 01 '18 at 14:21

Check if this help you:

JS:

String.prototype.toHHMM = function () {
var sec_num = parseInt(this, 10); 
var hours   = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);

if (hours   < 10) {hours   = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return hours+'hr(s) '+minutes+' minutes';

}

then:

alert('013000'.toHHMM());

https://codepen.io/alvaro-alves/pen/pZLwOd you will just to remove the ":" from time.

that is a very nice answer. – LeBlaireau Aug 01 '18 at 14:59 — LeBlaireau, Aug 01 '18 at 14:59

score 1 · Answer 2 · answered Aug 01 '18 at 14:21

1

let stringTime = '1:30:20';

let date = new Date (null, null, null, parseInt (stringTime.split(':')[0]), parseInt (stringTime.split(':')[1]), parseInt (stringTime.split(':')[2]));

let readiableTime = (((date.getHours()) ? date.getHours() + 'H' : '') + ' ' + (date.getMinutes() ? date.getMinutes() + 'm' : '')).trim();

console.log (readiableTime);

Answer: 1H 30m

answered Aug 01 '18 at 14:21

Ankit

496
5
11

The use of *parseInt* is unnecessary, as is the creation of a Date object. There doesn't seem to be any good reason to parse the string to a Date, then use Date methods to get back the values that were available in the string in the first place. – RobG Aug 01 '18 at 22:20
When you use "split" method in JS, it gives you result into string format, while Date method needs its arguments in integer format. That's why I use "parseInt" method to convert string result into the integer value. – Ankit Aug 02 '18 at 04:53
@Anit—the Date constructor doesn't need numbers, strings are fine: `new Date('2018','01','05')` will create a date for 2018-02-05. – RobG Aug 02 '18 at 09:09

score 0 · Answer 3 · answered Aug 02 '18 at 01:10

You can just split into the parts and format using a suitable method. How much functionality you build into the parser/formatter depends on how many different formats of input and output you want to support.

You could write a much more general parser/formatter, but if you only need to support one format, something simple should do, e.g.

function formatTime(v) {
  var [h,m,s] = v.split(':').map(Number);
  return (h? h + ' hour' + (h != 1? 's' : '') : '') + 
         (m? ' ' + m + ' minute' + (m != 1? 's' : '') : '') +
         (s? ' ' + s + ' second' + (s != 1? 's' : '') : '');
}

['01:30:00', '21:01:05', '00:10:01', '16:00:08'].forEach(v =>
  console.log(v + ' => ' + formatTime(v))
);

Javascript formatting time - Date fns

3 Answers3