Topic: datepicker value undefined when shown

architech priority asked 3 years 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 3 years ago

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


architech priority commented 3 years 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 priority commented 3 years 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 3 years ago

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


architech priority commented 3 years 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 3 years ago

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


architech priority commented 3 years ago

any updates on this issue ?


Arkadiusz Idzikowski staff commented 3 years ago

We are still working on the fix release.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: desktop
  • Browser: Chrome
  • OS: win
  • Provided sample code: No
  • Provided link: No