Open Closed

Invalid date on setting the date on date picker #7706


0
mujthabagroad created

Hi, <span class="colour" style="color: rgb(34, 34, 34);">We are facing an issue in our date picker that shows "invalid date" as well as getting previous day date when we set date to field, we tried many option which found in support, but still we couldn't solve the problem. need a help to move on.</span> We need to set date format as "dd/mm/yyyy" in though out the app regardless of culture. but we cannot set <span class="colour" style="color: rgb(34, 34, 34);">ClockProviders.Local as the users will be from different countries and need to keep UTC.</span> Tried with adding new language as en-GB to get this date format also tried in ngx-bootstrap-datepicker-config.service.ts, but no luck. <span class="colour" style="color: rgb(34, 34, 34);">While we are saving the date, below format will come </span> <span class="colour" style="color: rgb(34, 34, 34);">When we set the value while edit form</span> <span class="colour" style="color: rgb(34, 34, 34);">I changed language to English GB to get date format as 'dd/mm/yyyy'. but format is not changing.</span>

As requested, ngx-bootstrap-datepicker-config.service.ts<span class="colour" style="color: rgb(34, 34, 34);">  code is below:</span>

static getDaterangepickerConfig(): BsDaterangepickerConfig {
        return Object.assign(new BsDaterangepickerConfig(), {
            containerClass: 'theme-' + NgxBootstrapDatePickerConfigService.getTheme()
        });
    }

    static getDatepickerConfig(): BsDatepickerConfig {
        return Object.assign(new BsDatepickerConfig(), {
            containerClass: 'theme-' + NgxBootstrapDatePickerConfigService.getTheme()
        });
    }

    static getTheme(): string {
        return ThemeHelper.getTheme();
    }

    static getDatepickerLocale(): BsLocaleService {
        let localeService = new BsLocaleService();
        localeService.use(abp.localization.currentLanguage.name);
        //localeService.use('en-GB');
        return localeService;
    }

    static registerNgxBootstrapDatePickerLocales(): Promise<boolean> {
        if (abp.localization.currentLanguage.name === 'en') {
            return Promise.resolve(true);
        }

        let supportedLocale = new NgxBootstrapLocaleMappingService().map(abp.localization.currentLanguage.name).toLowerCase();
        let moduleLocaleName = new NgxBootstrapLocaleMappingService().getModuleName(abp.localization.currentLanguage.name);

        return new Promise<boolean>((resolve, reject) => {
            import(ngx-bootstrap/chronos/esm5/i18n/${supportedLocale}.js)
                .then(module => {
                    defineLocale(abp.localization.currentLanguage.name.toLowerCase(), module[${moduleLocaleName}Locale]);
                    resolve(true);
                }, reject);
        });
    }

<br> Thanks.


13 Answer(s)
  • 0
    maliming created
    Support Team

    We can't see the screenshot you shared, what is your version of Zero?

  • 0
    mujthabagroad created

    Angular version 8.2

  • 0
    maliming created
    Support Team

    I mean, the version of Zero is not an angular version. Can you re-upload the invalid image above?

  • 0
    mujthabagroad created

    Ooh sorry, that was my mistake, the version is 7.2. Images uploaded as you instructed.

    While we are saving the date, below format will come <span class="colour" style="color:rgb(34, 34, 34)">When we set the value while edit form</span> <span class="colour" style="color:rgb(34, 34, 34)">I changed language to English GB to get date format as 'dd/mm/yyyy'. but format is not changing.</span> Please check, i already gave it in email.

    Thanks.

  • 0
    ismcagdas created
    Support Team

    Hi @mujthabagroad

    As I understand you have two problems.

    1. Invalid date
    2. Getting one day before from selected date.

    We can help you with problem #1 but #2 is not a problem since you are using UtcClockProvider. When you use UtcClockProvider all dates are converted to UTC when you post a date to server and it will be send back to client as UTC. So, if you use momentFormat pipe on client side, it should display the correct date to end user.

    For problem #1, have you tried replacing all occurances of "abp.localization.currentLanguage.name" in ngx-bootstrap-datepicker-config.service.ts with the value 'en-GB' ? If you did that, could you share your project via email and let us check it for you ?

    Thanks,

  • 0
    mujthabagroad created
    1. i tried with that. used like localeService.use('en-GB');, but didn't work. Checked with** bookDate._d **and it is working in dev environment, but when running with AOT, getting this error ERROR in src/app/main/operation/shared/component/purchase-sale-common/general/general.component.html(30,20): Property '_d' does not exist on type 'Moment'. src/app/main/operation/shared/component/purchase-sale-common/general/general.component.html(30,20): ``Property ``'_d' does not exist on type 'Moment'. <br>

    2. I don't want to hard code it since there is an option to add language and make it default to work with right?, how we can do it using language menu?. the UTC will convert automatically based on their timezone right how to set it with <span class="colour" style="color: rgb(0, 0, 0);">momentFormat?</span> Clear me if am wrong. is it possible to take remote and look into it?.

    Thanks.

    <br> <br>

  • 0
    ismcagdas created
    Support Team

    Hi @mujthabagroad

    Each user can select their timezone in user profile menu and admin users can select default timezone in settings page.

    If you can send your project via email to info@aspnetzero.com, we can find the problem faster and help you.

    Thanks,

  • 0
    mujthabagroad created

    Hi @ismcagdas

    I couldn't find those option in settings, can u take remote access and check, there are some limitations to share the code.

    Thanks.

  • 0
    mujthabagroad created

    Hi,

    Awaiting for the response.

    Thanks

  • 0
    ismcagdas created
    Support Team

    Hi,

    It should be visible on settings page both for host and tenant like this https://docs.aspnetzero.com/documents/aspnet-core-angular/latest/Features-Angular-Tenant-Settings#general if you set Clock.Provider = ClockProviders.Utc in your app.

  • 0
    MellowoodMedical created

    Hi ,

    Is there any updateg on this issue? I am also using ngx-bootstrap datepicker. While displaying date for different locale like 'zh-Hans', its displaying invalid date. But if we display the same data on a td, its displaying as expected on chinese.
    Please see the original support tlicket for this issue below,

    https://support.aspnetzero.com/QA/Questions/8190

  • 0
    ismcagdas created
    Support Team

    Hi @MellowoodMedical

    Does this also happen in one of AspNet Zero pages ? Like audit logs or when editing a tenant ?

  • 0
    ismcagdas created
    Support Team

    This issue is closed because of no recent activity. Please open a new issue if you are still having this problem.