Topic: DatePicker and Select Problems
Geo Statie pro asked 5 years ago
Hi! After the update on 8.7.0 I have problems with the datepicker inside a reactive form. when I load the page, it looks like in the photo attached. The problem has something to do with setting 'locale' on the datepicker.
After changing the locale, it looks like this:
<mdb-date-picker #fromDatePicker formControlName="fromDate" [inline]="true" [label]="'Filter.FromDate' | translate" [locale]="userCulture"></mdb-date-picker>
I have another problem with the 'select' control used with a template-driven form. After the last update, 'x' button is visible although I didn't select anything.
[(ngModel)]="selectedOrderStatusId" [ngModelOptions]="{standalone: true}" (ngModelChange)="orderStatusSelected($event)" [allowClear]="true"
Bartosz Termena staff answered 5 years ago
Dear @Geo Statie
I need more info about first problem, because i can not reproduce it, here is my example:
<div class="container">
<div class="row">
<div class="col-md-12">
<form [formGroup]="datePickerForm">
<mdb-date-picker
[inline]="true"
name="mydate"
[locale]="userCulture"
[options]="myDatePickerOptions"
[placeholder]="'Selected date'"
formControlName="datePickerControl"
required
></mdb-date-picker>
</form>
</div>
</div>
</div>
TS
public myDatePickerOptions: IMyOptions = {
// Your options
};
userCulture = 'de';
datePickerForm: any;
public 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,
},
};
constructor(private localeService: LocaleService) {
this.localeService.setLocaleOptions(this.locales);
}
ngOnInit() {
const selectedDate = { date: { year: 2019, month: 5, day: 8 } };
this.datePickerForm = new FormGroup({
datePickerControl: new FormControl(selectedDate),
});
setTimeout(() => {
this.userCulture = 'en';
}, 2500);
}
Everything seems to work fine (with programmatic change userCulture).
About select - yes you are right, this problem occurs, we will take a closer look at that.
Best Regards, Bartosz.
Geo Statie pro commented 5 years ago
please don't provide default selected date in your code. the datepicker should not have an initial value.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.7.0
- Device: All
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No