Base solution for your next web application
Open Closed

Issues of Datepicker and Timezone #7916

User avatar
0
cclok89 created

I am using ASP.Net Core Angular version 7.0.0.

Scenario: When I select a date with datepicker (29/10/2019) in the UI, I get one day before the date (28/10/2019) in the backend, and stored the date (28/10/2019) in database.

Solutions: Use Clock.Now; for date Set Clock.Provider = ClockProviders.Utc; in Startup.cs Set Timezone (UTC+8) in Host and Tenant Setting page

Results:

  1. The saved date show correctly (29/10/2019) in the UI label, even the date in the database is different (28/10/2019).
  2. When I select a new date with datepicker (30/10/2019) in the UI, I get one day before the date (29/10/2019) in the backend, and stored the date (29/10/2019) in database. However in the UI datepicker it show correct date (30/10/2019) even the label show differently (29/10/2019).

Questions:

  1. Is that my solution correct? Anything else I need to do?
  2. Is that it work as described in the result? Date in the UI (UTC+8) and database (UTC+0) are different?
  3. For date only, should I use Clock.Now.Date so that the issue in result 2 will be solved?
  4. How if tenant based in Singapore set Timezone to Singapore Standard Time and user from Thailand using S.E. Asia Standard Time? Is that configured by changing Language flag can work?
Go to accepted answer
5 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    If the UTC clock provider is used, then all DateTimes stored in the database are assumed as UTC values, and all DateTimes received from clients are assumed as UTC values unless explicitly specified.

    https://aspnetboilerplate.com/Pages/Documents/Timing

    The application backend will convert the received date to utc time, and the time stored in the database will also be utc time. But in the front UI, utc will be automatically converted to the appropriate time according to the time zone.

  • User Avatar
    0
    cclok89 created

    I found that there is ._d in the input which messed up the utc datetime.

  • User Avatar
    0
    maliming created
    Support Team

    Can you talk about it specifically? If you can, please provide some screenshots.

  • User Avatar
    0
    cclok89 created

    I think I know why already.

    ngx-bootstrap datepicker cannot support moment object binding to ngModel, that why using ._d to make it Date object.

    <input class="form-control m-input" type="datetime" bsDatepicker [(ngModel)]="date._d" id="Date" name="Date">

    Since I enabled UTC mode, ._d object carry the UTC date and convert again to UTC datetime to the backend, that I always cannot get the correct UTC datetime. End up when displaying in the label, it always shows one day before the exact date. So, remove ._d, create a Date object and use toDate() to convert moment object to Date obejct will solve the issue for Result 2.

  • User Avatar
    0
    musa.demir created

    Hello @cclok89

    I created an issue about it. https://github.com/aspnetzero/aspnet-zero-core/issues/3173 You can also find the solution in the issue.

    Use datePickerMomentModifier with [(date)]="sampleDate" input.

Assignee
No one
Labels
Non yet