Using timezone settings to display datetime.

[maliming]

Resolve #22234

I will update the document and write an article to introduce the new changes.

---

Demo app: https://github.com/maliming/TimeZone
Run all websites, then change timezone in the setting area, create/update entity to see the datetime changes.

A meeting entity that has some datetime properties.

public class Meeting : AggregateRoot<Guid>
{
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public DateTime ActualStartTime { get; set; }
    public DateTime? CanceledTime { get; set; }
    public DateTimeOffset ReminderTime { get; set; }
    public DateTimeOffset? FollowUpTime { get; set; }
    public string Description { get; set; }
}

---

• We need to add a new UseAbpTimeZone after UseMultiTenancy middleware to all of the backend apps.

It will get the current user/tenant/global timezone setting, which we can then use in the IClock service(It's mainly about getting and using it in a synchronized method).

app.UseMultiTenancy()
app.UseAbpTimeZone()

---

• Use IClock.ConvertTo method to convert UTC to user's datetime in MVC/Razor page in backend.

Three methods were added to IClock, you can use them to convert between UTC and user timezone date.

/// <summary>
/// Converts given UTC <see cref="DateTime"/> to user's time zone.
/// </summary>
/// <param name="dateTime">DateTime to be normalized.</param>
/// <returns>Converted DateTime</returns>
DateTime ConvertTo(DateTime dateTime);

/// <summary>
/// Converts given <see cref="DateTimeOffset"/> to user's time zone.
/// </summary>
/// <param name="dateTimeOffset">DateTimeOffset to be normalized.</param>
/// <returns>Converted DateTimeOffset</returns>
DateTimeOffset ConvertTo(DateTimeOffset dateTimeOffset);

/// <summary>
/// Converts given user's <see cref="DateTime"/> to UTC or not.
/// </summary>
/// <param name="dateTime">DateTime to be normalized.</param>
/// <returns>Converted DateTime</returns>
DateTime ConvertFrom(DateTime dateTime);

<td>@Clock.ConvertTo(meeting.StartTime)
 @Clock.ConvertTo(meeting.EndTime)</td>

---

• API will return UTC datetime:

---

• JavaScript will use abp.clock.normalizeToLocaleString to convert UTC to user's datetime.
  And use abp.clock.normalizeToString to convert the local date to ISO 8601 string sent to the server.

---

Blazor needs to use the IClock.ConvertTo and IClock.ConvertFrom methods to show and create/update entities.

---

MVC form needs to normalize the date to ISO 8061 before sending to the server.

Please call the handleDatepicker method before submitting the form to process the DatePicker element, which accepts a method to match the DatePicker element in the form.

eg:

$('#MyEditModal button[type="submit"]').on('click', function (e) {
    $form.handleDatepicker('.singledatepicker');
});

var abp = abp || {};
$(function () {
    abp.modals.edit = function () {
        var initModal = function (publicApi, args) {
            var $form = publicApi.getForm();
            $form.find('button[type="submit"]').on('click', function (e) {
                $form.handleDatepicker('input[type="hidden"][data-hidden-datepicker]');
            });
        };

        return {
            initModal: initModal
        }
    };
});

https://bootstrap-taghelpers.abp.io/Components/DatePicker

---

The datetimes in the UI will convert to the corresponding time based on different time zone setting, and you can also create and update an entity based on your current time zone.