datepicker value undefined when shown


Topic: datepicker value undefined when shown

architech pro premium priority vip early access asked 1 months ago

Expected behavior Datepicker component in in hidden div. When div is shown datepicker components displays correct placeholder text.

Actual behavior When showing hidden div, datepicker component displays value "00 undefined 0"

Resources (screenshots, code snippets etc.)

<button type="button" mdbBtn outline="true" rounded="true" size="sm" (click)="formVisible  = !formVisible"
    class="px-2  text-darkgray" mdbWavesEffect>
    <mdb-icon fas icon="search" class="mt-0"></mdb-icon>
</button>

<ng-container *ngIf="formVisible">

    <div class="col-md-5 md-form">
        <mdb-date-picker [(ngModel)]="dateUntil" [options]="datePickerOptions" name="dateUntil" [inline]="true"
            [locale]="'cardscore.locale'" [placeholder]="'cardscore.CardRequestsOverview.filter_dateTo' | translate">
        </mdb-date-picker>
    </div>
</ng-container>

Arkadiusz Idzikowski staff commented 1 months ago

What are the component options and what do you pass to the locale and ngModel inputs?


architech pro premium priority vip early access commented 1 months ago

for datepicker I have only one option - date format

datePickerOptions: IMyOptions = { dateFormat: 'dd-mm-yyyy' };

locales are paset below because here I couldn't format it well


architech pro premium priority vip early access commented 1 months ago

locales

export const locales = {
    de: {
        dayLabels: { su: 'Son', mo: 'Mon', tu: 'Die', we: 'Mit', th: 'Don', fr: 'Fre', sa: 'Sam' },
        dayLabelsFull: { su: 'Sonntag', mo: 'Montag', tu: 'Dienstag', we: 'Mittwoch', th: 'Donnerstag', fr: 'Freitag', sa: 'Samstag' },
        monthLabels: {
            1: 'Jan', 2: 'Feb', 3: 'Mär', 4: 'Apr', 5: 'Mai', 6: 'Jun',
            7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Okt', 11: 'Nov', 12: 'Dez'
        },
        monthLabelsFull: {
            1: 'Januar', 2: 'Februar', 3: 'März', 4: 'April', 5: 'Mai', 6: 'Juni', 7: 'Juli',
            8: 'August', 9: 'September', 10: 'Oktober', 11: 'November', 12: 'Dezember'
        },
        dateFormat: 'dd mmmm yyyy',
        todayBtnTxt: 'Heute',
        clearBtnTxt: 'Klar',
        closeBtnTxt: 'Schließen',
        firstDayOfWeek: 'mo',
        sunHighlight: true,
    },
    en: {
        dayLabels: { su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thr', fr: 'Fri', sa: 'Sat' },
        dayLabelsFull: { su: 'Sunday', mo: 'Monday', tu: 'Tuesday', we: 'Wednesday', th: 'Thursday', fr: 'Friday', sa: 'Satturday' },
        monthLabels: {
            1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun',
            7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Okt', 11: 'Nov', 12: 'Dec'
        },
        monthLabelsFull: {
            1: 'January', 2: 'February', 3: 'Mart', 4: 'April', 5: 'May', 6: 'June', 7: 'July',
            8: 'August', 9: 'September', 10: 'October', 11: 'November', 12: 'December'
        },
        dateFormat: 'dd mmmm yyyy',
        todayBtnTxt: 'Today',
        clearBtnTxt: 'Clear',
        closeBtnTxt: 'Close',
        firstDayOfWeek: 'mo',
        sunHighlight: true,
    },
    hr: {
        dayLabels: { su: 'Ned', mo: 'Pon', tu: 'Ut', we: 'Sri', th: 'Čet', fr: 'Pet', sa: 'Sub' },

        dayLabelsFull: { su: 'Nedelja', mo: 'Ponedeljak', tu: 'Utorak', we: 'Srijeda', th: 'Četvrtak', fr: 'Petak', sa: 'Subota' },
        monthLabels: {
            1: 'Sij', 2: 'Velj', 3: 'Ožu', 4: 'Tra', 5: 'Svi', 6: 'Lip',
            7: 'Srp', 8: 'Kol', 9: 'Ruj', 10: 'Lis', 11: 'Stu', 12: 'Pro'
        },
        monthLabelsFull: {
            1: 'Siječanj', 2: 'Veljača', 3: 'Ožujak', 4: 'Travanj', 5: 'Svibanj', 6: 'Lipanj', 7: 'Srpanj',
            8: 'Kolovoz', 9: 'Rujan', 10: 'Listopad', 11: 'Studeni', 12: 'Prosinac'
        },
        dateFormat: 'dd mmmm yyyy',
        todayBtnTxt: 'Danas',
        clearBtnTxt: 'Očisti',
        closeBtnTxt: 'Zatvori',
        firstDayOfWeek: 'mo',
        sunHighlight: true,
    }
};

Arkadiusz Idzikowski staff commented 1 months ago

Thank you. Does dateUntil variable has any value on the component init?


architech pro premium priority vip early access commented 1 months ago

no it doesn't - it's a component scoped variable. aslo ... if I use datepicker options: export const datePickerOptions: IMyOptions = { // Year limits minYear: 1999, maxYear: 2021,

// Show Today button showTodayBtn: true, dateFormat: 'dd-mm-yyyy', // Show Clear date button showClearDateBtn: true,

markCurrentDay: true,
markWeekends: undefined,
disableHeaderButtons: false,
showWeekNumbers: false,

};

then it takes 13 seconds for datepicker to show popup. When in the popup I click "clear" then datepicker component shows placeholder text - which should be initial state of the datepicker.


Arkadiusz Idzikowski staff commented 1 months ago

Thank you for the additional information. We will take a closer look at those problems and let you know what we found.


architech pro premium priority vip early access commented 2 weeks ago

any updates on this issue ?


Arkadiusz Idzikowski staff commented 2 weeks ago

We are still working on the fix release.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 9.3.1
  • Device: desktop
  • Browser: Chrome
  • OS: win
  • Provided sample code: No
  • Provided link: No