Date Handling in Angular Application (Part 1 — JSON and JavaScript Date Object Study)

https://medium.com/self-learning/date-handling-in-angular-application-part-1-json-and-javascript-date-object-s-8f77a69734c7

Introduction

In modern web application, JSON is widely used as communication format between server side and client side. However, JSON do not specify the format of date object.

General Agreement

ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ) is a general agreement for exchange format of date object.

JavaScript Date Object

var now = new Date()

The above is a way to create a date object in browser environment.

Time zone and locale dependent

By Default, browser would use the time zone and locale to display date in browser. i.e.

var now = new Date();
console.log(now.toString());

Result: Sun Jun 30 2019 23:18:34 GMT+0800 (China Standard Time)

The some method in the date object in browser are timezone and locate dependent.

var now = new Date();
now.getHours()

result: 23

ISO Format (Time zone and locale independent)

As mention above, ISO Date String Format is a general agreement format in JSON format.

var now = new Date()
console.log(now.toISOString());

result: 2019-06-30T15:55:46.936Z

JSON Conversion

Convert Date Object to JSON

var jsonData = {date1: new Date()};
console.log(JSON.stringify(jsonData));

result: {"date1":"2019-06-30T16:26:18.460Z"}

Revert JSON to JavaScript Object

var jsonData = {date1: new Date()};
var jsonDataStr = JSON.stringify(jsonData)
var revertedJsonData = JSON.parse(jsonDataStr);
console.log(revertedJsonData);

result: {date1: "2019-06-30T16:30:19.096Z"}

It is found the JSON reversion (JSON.parse) do not know the type of Date. It cannot convert the date string to Date object.

The ISO 8601 is a agreed format for the date object json string. We could use the reviver function in JSON.parse to help the conversion.

var isoDateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?Z$/;
function parseIsoDateStrToDate(key, value){
  if (typeof value === "string" && isoDateFormat.test(value)){
    return new Date(value);
}
  return value
}
var jsonData = {date1: new Date()};
var jsonDataStr = JSON.stringify(jsonData)
var revertedJsonData = JSON.parse(jsonDataStr, parseIsoDateStrToDate);
console.log(revertedJsonData);

result: {date1: Mon Jul 01 2019 01:00:04 GMT+0800 (China Standard Time)}

Summary of JSON Date And JavaScript Date Object

• JavaScript Date Object is Time zone and Locale Dependent
• ISO 8601 Date Format is a general agreement for JSON Date representation
• JavaScript do not know JSON date type

Reference

• http://json.org/
• http://es5.github.io/#x15.9.2
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

Part2: https://dev.to/imben1109/date-handling-in-angular-application-part-2-angular-http-client-and-ngx-datepicker-3fna

Comments

[linehammer]

JSON does not know anything about dates. What .NET does is a non-standard hack/extension. The problem with dates in JSON and really JavaScript in general – is that there's no equivalent literal representation for dates. In JavaScript following Date constructor straight away converts the milliseconds since 1970 to Date as follows:

var jsonDate = new Date(1297246301973);

Then let's convert it to js format:

var date = new Date(parseInt(jsonDate.substr(6)));

The substr() function takes out the /Date( part, and the parseInt() function gets the integer and ignores the )/ at the end. The resulting number is passed into the Date constructor .

net-informations.com/jq/iq/jdate.htm