0

I use ng-zorro-antd's datepicker in my project,

https://ng.ant.design/components/date-picker/en

When I choose the date and time, console will show correct time with timezone like

Mon Jun 01 2020 05:10:30 GMT+0800 (中國標準時間) {}

But when I submit to backend,the datetime will become

2020-05-31T21:10:30.942Z

It's one day less, How can I resolve this?

I make a example like below https://stackblitz.com/edit/angular-acsrm4-gmdget

Open F12 first, Then choose one day and click send, You will see the situation in the network parameter.

Thanks a lot.

Shaolin
  • 1
  • 4
  • 1
    It's NOT one day less. It's UTC time. 國際標準時間 0500 -8 (the +8 offset) = 2100 which is the time displayed. – Kasey Chang Jun 03 '20 at 00:40
  • But If I save this time to database, It's hard to query the correct time. – Shaolin Jun 03 '20 at 00:43
  • So leave it in UTC, then display the locale version of the time. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString – Kasey Chang Jun 03 '20 at 00:44
  • 1
    You have to make a choice: either ONLY deal in local time (and if someone throws something in a different timezone and your program goes crazy) or you convert ALL the date and time to UTC internally and only display local time based on locale settings. I recommend the latter, probably with help of moment.js or similar library. – Kasey Chang Jun 03 '20 at 00:46
  • Just to clarify: it's still the same TIME, just displayed differently. As long as you STORED these same value (the actual date-time, not the string version), they will query the same. – Kasey Chang Jun 03 '20 at 00:50
  • May I ask how to leave UTC date? The ng-zorro dependency on date-fns, I don't know how to set global date format. – Shaolin Jun 03 '20 at 01:53
  • Did you read through https://ng.ant.design/docs/i18n/en specifically "how to format a date using date-fns"? – Kasey Chang Jun 03 '20 at 04:16
  • Yes, I already read and try this, but this just for setting languages, didn't resolve my problem. – Shaolin Jun 03 '20 at 05:06
  • I think I need to know how to setting a global date format to my project, thank you for your patient, I try hard to solve this, If I find a way, I will share here. thanks anyway. – Shaolin Jun 03 '20 at 05:11
  • So your point is "It's hard to query the correct time in database"? Usually the frontend and backend transfer Unix timestamp https://stackoverflow.com/questions/221294/how-do-you-get-a-timestamp-in-javascript – Seven Jun 03 '20 at 06:54
  • why not the date pick just show the actual UTC date on the calendar? – CloudWave Jun 20 '21 at 15:43

1 Answers1

0

With the help of moment-timezone.js (front-end or back-end)

  1. get local time zone on client: moment.tz(moment.tz.guess())

  2. define moment date object: moment(yourDate.toISOString())

  3. find the local time zone off set: moment.tz(moment.tz.guess()).utcOffset()

  4. off set the date object with local time zone off set: moment(yourDate.toISOString()).utcOffset(moment.tz(moment.tz.guess()).utcOffset())

  5. format the result ISO: format('YYYY-MM-DDTHH:mm:ss.SSS')+'Z'

Single Line: yourDate = moment(yourDate.toISOString()).utcOffset(moment.tz(moment.tz.guess()).utcOffset()).format('YYYY-MM-DDTHH:mm:ss.SSS')+'Z';

CloudWave
  • 913
  • 9
  • 16