Managing multiple date formats in Javascript

Question

Similar questions has been asked many times but I couldn't find a more concrete solution. The things I'm doing are:

I have a <input type="date"> inside my HTML which when clicked opens a calender with date in dd/mm/yyyy format.
I change the html5 date to timestamp to send to my db by Date.parse(html5Date) and in the server I modify the date and send it back to my Angular app.
I now convert the timestamp back to Date object by new Date(timestamp).To print the date in a human-friendly format inside a table I do [date.getDate(), date.getMonth() + 1, date.getFullYear()].join('/').
On edit (PUT request), I again capture the date from HTML, convert it to timestamp, send it to server and process the returning date back to html date.
Other than these, I also do a ton of functionalities like date comparison, adding hours to the dates, show time of the day etc inside the HTML:
Just these simple operations are over 120 lines of code which I think is ridiculous and error prone. I've looked into Angular Datepicker but it's a bit confusing. Also sometimes the HTML date is of type Object and sometimes it's String so Date.parse() gives error.
Are there any developer friendly methods that does : copy HTML5 date (from datepicker) --> change to timestamp (for angular&server) --> format timestamp back to string/object (for html)? Thank You :)

Note: Angular throws a lot of annoying error in console saying dateformat is wrong (being html date type) but doesn't stop code from running

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Sounds like you are doing waaay to many conversions. I would argue that there should only be one way dates are represented: as Date objects in the programming language. There are only a few conversions that need to happen:

Date <=> Integer milliseconds since the epoch to pass to server
Date <=> String human-readable format to display to user

Any thing beyond this is asking for trouble. Comparisons can be made by casting to int date.getTime(), comparing, and casting back to Date. Ditto for additions. Note that Date.parse is implementation dependent in what it will accept, although all of them will accept ISO 8601 formatted date strings anything else is guesswork. Which means you will have to deal with converting strings by hand, something like the following:

var toDate = str => {
   var splitter = str.indexOf("/") === -1 ? "-" : "/";
   var [mon, day, year] = str.split(splitter);
   return new Date(year, mon - 1, day);
};

var toDateString = date => {
  return "" + date.getFullYear() + (date.getMonth() + 1) +...
};

Note that there's no validation, that's left as an exercise to the reader.

A WORD ABOUT MOMENT.JS

moment.js is awesome. Its also huge, its a kitchen-sink API with a heft to match. You're already loading angular, so think carefully before bulking the size of your payload with another huge library.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 21, 2017 at 20:06

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

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

3 Comments

Sam Over a year ago

Good points, it might just be a matter of re-coding things. But I wouldn't say moment is huge. It's 3000-4000 lines (that's uncompressed, it would be a lot smaller if it were compressed). Angular uncompressed is like 32000 lines. But it is important to keep script size to a minimum.

RobG Over a year ago

splitter can be /\D/ so any non-digit will do.

Jamie Over a year ago

Thanks for the answer. I finally created a factory with multiple date conversion methods inside it so I can inject and use it in other controllers. Helped me a ton.

Sam · Accepted Answer · 2017-03-21 19:45:17Z

0

Moment.js is a powerful date formatting and manipulation library. A lot of things you can do in Moment.js are a single line of code, which makes life a lot easier. I agree, without using a library like this date formatting and handling can be a pain.

http://momentjs.com/

EDIT: fyi, I use this with my Angular app and find it extremely useful!

answered Mar 21, 2017 at 19:45

Sam

9707 silver badges22 bronze badges

3 Comments

RobG Over a year ago

This should be a comment, it's not an answer.

Sam Over a year ago

I intended it as an answer to his problem. :)

Jared Smith Over a year ago

@sam if this is an answer, then the question should be closed as off-topic for asking for a tool/library. Someone (not me) has already voted to close it. I think that's a little harsh, so I answered it as written.

Collectives™ on Stack Overflow

Managing multiple date formats in Javascript

2 Answers 2

A WORD ABOUT MOMENT.JS

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

A WORD ABOUT MOMENT.JS

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related