Base solution for your next web application
Open Closed

Date Format and Time is incorrect in grid fields #1633


User avatar
0
rickwheeler created

I noticed that in all the grids of the interface, the date format and time was displaying incorrectly.

Problem 1: Date format was incorrect Since I'm in australia, our date format is dd/MM/yyyy.

In all of the ABP Zero grids, the date was showing as MM/dd/yyyy which is wrong.

The grid options displayed as follows

{
    name: app.localize('AnImportantDate'),
    field: 'anImportantDate',
    cellFilter: 'momentFormat: \'L LT\'' // Moment.js Local string format. Formats to local locale settings
}

This should mean that the items in the grid would display in the locale set in moment js.

Problem 2: Time was incorrect. Since my time zone is UTC+10, I saved an item at 9am 05/05/2016 and it was displaying in the grid as 04/05/2016 (One day earlier). This is because the UTC time passed by AppService is not being converted to local time in the GUI.

To Fix: XYZ.Web/App/Common/Filters/momentjs-filters.js

// need load the moment.js to use these filters. 

(function () {

    appModule.filter('momentFormat', function () {
        return function (date, formatStr) {
            if (!date) {
                return '-';
            }
            
             moment.locale(window.navigator.userLanguage || window.navigator.language); // Fixes problem 1
             return moment(date).local().format(formatStr); // Fixes problem 2
        };
    })
    .filter('fromNow', function () {
        return function (date) {
            return moment(date).fromNow();
        };
    });

})();

2 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    First of all thanks for detailed explanation.

    About date format problem, We were setting momentjs locale in layout.cshtml file with this line,

    moment.locale('@Thread.CurrentThread.CurrentUICulture.Name.Left(2)'); //Localizing moment.js
    

    but when culture is set to "en-AU" it just gets first two chars and this is a wrong behavior, so we will change it to next release

    moment.locale('@Thread.CurrentThread.CurrentUICulture.Name'); //Localizing moment.js
    

    You can make this change in your project as well, it will fix problem 1.

    By default "English (Australia)" language is not added to languages list. Please add this language and change your language to it on UI.

    Your approach, setting browser language as moment locale has this problem; for example, if a user from Australia wants to use UI in american english, it does not support that.

    For problem two, I couldn't reproduce the problem. When using UtcClockProvider as Clock.Provider in server side and setting user's timezone to "(UTC+10:00) Canberra, Melbourne, Sydney" on MySetting's dialog worked as expected for me.

    Can you run this script on your browser's developer console and share it's result with me ?

    moment().tz()
    

    Can you also share the database value for example datetime ?

  • User Avatar
    0
    rickwheeler created

    Hi,

    Thanks for your help. I can confirm that both of these issues are resolved.

    #2 was because the database was refreshed and I forgot to set my time-zone again.

    Regards, Sean