Base solution for your next web application
Open Closed

Regarding date format as per locale browser setting - Not working #9766

User avatar
0
OriAssurant created

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

  • What is your product version?
  • What is your product type (Angular or MVC)? : ANGULAR
  • What is product framework type (.net framework or .net core)? : .NET CORE

Hi , We tried to reach you previously for this issue and you suggested to use the below code in AppPreBoostrap.ts file . But not sure we tried to change the Browser to use canada format but it still showed US Data format. I site is is in prod and we need your help urgently.

let locale = window.navigator.language; moment.locale(locale); (window as any).moment.locale(locale);

    I  have attached the entire code code from our AppPreBoostrap.ts file.  Please help ...
    
    

    import { UtilsService } from '@abp/utils/utils.service';
import { CompilerOptions, NgModuleRef, Type } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppAuthService } from '@app/shared/common/auth/app-auth.service';
import { AppConsts } from '@shared/AppConsts';
import { SubdomainTenancyNameFinder } from '@shared/helpers/SubdomainTenancyNameFinder';
import * as moment from 'moment-timezone';
import * as _ from 'lodash';
import { UrlHelper } from './shared/helpers/UrlHelper';
import { XmlHttpRequestHelper } from '@shared/helpers/XmlHttpRequestHelper';
import { DynamicResourcesHelper } from '@shared/helpers/DynamicResourcesHelper';
import { environment } from './environments/environment';
import { LocaleMappingService } from '@shared/locale-mapping.service';

export class AppPreBootstrap {

static run(appRootUrl: string, callback: () => void, resolve: any, reject: any): void {
    AppPreBootstrap.getApplicationConfig(appRootUrl, () => {
        if (UrlHelper.isInstallUrl(location.href)) {
            AppPreBootstrap.loadAssetsForInstallPage(callback);
            return;
        }

        const queryStringObj = UrlHelper.getQueryParameters();

        if (queryStringObj.redirect && queryStringObj.redirect === 'TenantRegistration') {
            if (queryStringObj.forceNewRegistration) {
                new AppAuthService().logout();
            }

            location.href = AppConsts.appBaseUrl + '/account/select-edition';
        } else if (queryStringObj.impersonationToken) {
            AppPreBootstrap.impersonatedAuthenticate(queryStringObj.impersonationToken, queryStringObj.tenantId, () => { AppPreBootstrap.getUserConfiguration(callback); });
        } else if (queryStringObj.switchAccountToken) {
            AppPreBootstrap.linkedAccountAuthenticate(queryStringObj.switchAccountToken, queryStringObj.tenantId, () => { AppPreBootstrap.getUserConfiguration(callback); });
        } else {
            AppPreBootstrap.getUserConfiguration(callback);
        }
    });
}

static bootstrap<TM>(moduleType: Type<TM>, compilerOptions?: CompilerOptions | CompilerOptions[]): Promise<NgModuleRef<TM>> {
    return platformBrowserDynamic().bootstrapModule(moduleType, compilerOptions);
}

private static getApplicationConfig(appRootUrl: string, callback: () => void) {
    let type = 'GET';
    let url = appRootUrl + 'assets/' + environment.appConfig;
    let customHeaders = [
        {
            name: 'Abp.TenantId',
            value: abp.multiTenancy.getTenantIdCookie() + ''
        }];

    XmlHttpRequestHelper.ajax(type, url, customHeaders, null, (result) => {
        const subdomainTenancyNameFinder = new SubdomainTenancyNameFinder();
        let tenancyName = subdomainTenancyNameFinder.getCurrentTenancyNameOrNull(result.appBaseUrl);
        //Custom changes for Okta Host widget--106375
        if(tenancyName.toLowerCase().includes("host"))    {tenancyName="Default"; }
        // CUSTOM ADDITION HERE
        let getTenantIdURL = result.remoteServiceBaseUrl + '/api/services/app/Account/IsTenantAvailable';
        let getTenantIdData = {tenancyName: tenancyName};

        XmlHttpRequestHelper.ajax('POST', getTenantIdURL, null, JSON.stringify(getTenantIdData), (tenantResult) => {
          
            abp.multiTenancy.setTenantIdCookie(tenantResult.result.tenantId);
            AppConsts.appBuildNumber = result.appBuildNumber;
            AppConsts.appBaseUrlFormat = result.appBaseUrl;
            AppConsts.remoteServiceBaseUrlFormat = result.remoteServiceBaseUrl;
            AppConsts.localeMappings = result.localeMappings;
            AppConsts.azureCdnUrl=result.azureCdnUrl;
            if (tenancyName == null) {
                AppConsts.appBaseUrl = result.appBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');
                //AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');
            } else {
                AppConsts.appBaseUrl = result.appBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl, tenancyName);
                //AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl, tenancyName);
            }
            AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl;

            callback();
        });
    });
}

private static getCurrentClockProvider(currentProviderName: string): abp.timing.IClockProvider {
    if (currentProviderName === 'unspecifiedClockProvider') {
        return abp.timing.unspecifiedClockProvider;
    }

    if (currentProviderName === 'utcClockProvider') {
        return abp.timing.utcClockProvider;
    }

    return abp.timing.localClockProvider;
}

private static impersonatedAuthenticate(impersonationToken: string, tenantId: number, callback: () => void): void {
    abp.multiTenancy.setTenantIdCookie(tenantId);
    const cookieLangValue = abp.utils.getCookieValue('Abp.Localization.CultureName');

    let requestHeaders = {
        '.AspNetCore.Culture': ('c=' + cookieLangValue + '|uic=' + cookieLangValue),
        'Abp.TenantId': abp.multiTenancy.getTenantIdCookie()
    };

    XmlHttpRequestHelper.ajax(
        'POST',
        AppConsts.remoteServiceBaseUrl + '/api/TokenAuth/ImpersonatedAuthenticate?impersonationToken=' + impersonationToken,
        requestHeaders,
        null,
        (response) => {
            let result = response.result;
            abp.auth.setToken(result.accessToken);
            AppPreBootstrap.setEncryptedTokenCookie(result.encryptedAccessToken);
            location.search = '';
            callback();
        }
    );
}

private static linkedAccountAuthenticate(switchAccountToken: string, tenantId: number, callback: () => void): void {
    abp.multiTenancy.setTenantIdCookie(tenantId);
    const cookieLangValue = abp.utils.getCookieValue('Abp.Localization.CultureName');

    let requestHeaders = {
        '.AspNetCore.Culture': ('c=' + cookieLangValue + '|uic=' + cookieLangValue),
        'Abp.TenantId': abp.multiTenancy.getTenantIdCookie()
    };

    XmlHttpRequestHelper.ajax(
        'POST',
        AppConsts.remoteServiceBaseUrl + '/api/TokenAuth/LinkedAccountAuthenticate?switchAccountToken=' + switchAccountToken,
        requestHeaders,
        null,
        (response) => {
            let result = response.result;
            abp.auth.setToken(result.accessToken);
            AppPreBootstrap.setEncryptedTokenCookie(result.encryptedAccessToken);
            location.search = '';
            callback();
        }
    );
}

private static getUserConfiguration(callback: () => void): any {
    const cookieLangValue = abp.utils.getCookieValue('Abp.Localization.CultureName');
    const token = abp.auth.getToken();

    let requestHeaders = {
        '.AspNetCore.Culture': ('c=' + cookieLangValue + '|uic=' + cookieLangValue),
        'Abp.TenantId': abp.multiTenancy.getTenantIdCookie(),
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET,PUT,POST'
    };

    if (token) {
        requestHeaders['Authorization'] = 'Bearer ' + token;
    }

    return XmlHttpRequestHelper.ajax('GET', AppConsts.remoteServiceBaseUrl + '/api/services/app/UiCustomizationSettings/GetAll', requestHeaders, null, (response) => {
        let result = JSON.parse(response).result;
        _.merge(abp, result);

        abp.clock.provider = this.getCurrentClockProvider(result.clock.provider);

        let locale =  window.navigator.language;
        moment.locale(locale);
        (window as any).moment.locale(locale);

        if (abp.clock.provider.supportsMultipleTimezone) {
            moment.tz.setDefault(abp.timing.timeZoneInfo.iana.timeZoneId);
            (window as any).moment.tz.setDefault(abp.timing.timeZoneInfo.iana.timeZoneId);
        } else {
            moment.fn.toJSON = function () {
                return this.locale('en').format();
            };
            moment.fn.toISOString = function () {
                return this.locale('en').format();
            };
        }

        abp.event.trigger('abp.dynamicScriptsInitialized');

        AppConsts.noDirectAccessWorkflowPages = JSON.parse(abp.setting.get('App.UiManagement.Workflow.NoDirectAccessPages'));
        AppConsts.recaptchaSiteKey = abp.setting.get('Recaptcha.SiteKey');
        AppConsts.subscriptionExpireNootifyDayCount = parseInt(abp.setting.get('App.TenantManagement.SubscriptionExpireNotifyDayCount'));

        DynamicResourcesHelper.loadResources(callback);
    });
}

private static setEncryptedTokenCookie(encryptedToken: string) {
    new UtilsService().setCookieValue(AppConsts.authorization.encrptedAuthTokenName,
        encryptedToken,
        new Date(new Date().getTime() + 365 * 86400000), //1 year
        abp.appPath
    );
}

private static loadAssetsForInstallPage(callback) {
    abp.setting.values['App.UiManagement.Theme'] = 'default';
    abp.setting.values['default.App.UiManagement.ThemeColor'] = 'default';

    DynamicResourcesHelper.loadResources(callback);
}
}

Also in the prime ng grid i am adding the date format like this for the column

<ng-template pTemplate="body" let-record="$implicit"> <tr [ngClass]="record.selected && !isShow ? 'validated' :(record.scannedByotherUser && !isShow ? 'validatedByOthers' : '')"> <td ngFor="let col of shipOutCols" [hidden]="!col.isVisible"> {{col.field.includes('Time') || col.field.includes('Date') ? ** (record[col.field] | momentFormat:'L LTS'):record[col.field]}}* </td>

THIS WORKS FINE - it gets correct language but does not change the date format as per the country setting .. Please advice

let locale = window.navigator.language; moment.locale(locale); (window as any).moment.locale(locale);

Go to accepted answer
1 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @OriAssurant

    When I try this locally, it works as expected. Here is what I tried;

    1. I changed {{ record.executionTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}} to {{ record.executionTime | momentFormat:'L LTS'}} in audit-logs.component.html.
    2. I changed my browser's (Google Chrome) language to English (Canada)
    3. injectted the code below into AppPrebootstrap.ts
    let locale = window.navigator.language;
moment.locale(locale);
(window as any).moment.locale(locale);

    and here is the result;

    Could you try applying step1 to your project and see if audit logs page shows the date format as you want ? If it does, then probably the problem is related to this part of your code;

    <ng-template pTemplate="body" let-record="$implicit">
<tr [ngClass]="record.selected && !isShow ? 'validated' :(record.scannedByotherUser && !isShow ? 'validatedByOthers' : '')">
<td ngFor="let col of shipOutCols" [hidden]="!col.isVisible">
{{col.field.includes('Time') || col.field.includes('Date') ? ** (record[col.field] | momentFormat:'L LTS'):record[col.field]}}*
</td>
Assignee
No one
Labels
None yet