ng-zorro datepicker got one day less

Question

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.

Answer 1

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