Topic: mdb-select and mdb-date-picker not binding
Expected behavior*Hi, I have implemented a simple dropdown list and a DatePicker. When selecting a date or value, mdb is failing to bind it to the specified variable in typescript.*Actual behavior
Resources (screenshots, code snippets etc.)
Here is the html code:
<mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="''" label="Date Due" [(ngModel)]="selectedDate" required>
</mdb-date-picker>
</div>
Here is the typescript code:
selectedDate: Date;client = { id: 0, Description: ''default" };
ngOnInit() {
this.clientList =[ { value: '1', label: 'Ilunga' }, { value: '2', label: 'Kabongo' }, { value: '3', label: 'Mujinga' }, ];
}
I tried to reproduce this problem but without success. Please try this code:
HTML
<mdb-date-picker
name="mydate"
[options]="myDatePickerOptions"
[placeholder]="'Selected date'"
[(ngModel)]="selectedDate"
></mdb-date-picker>
<mdb-select [(ngModel)]="selectedValue" [options]="dateOptionsSelect" placeholder="Choose time period"></mdb-select>
<button mdbBtn color="primary" (click)="showSelectedValues()">Show selected values</button>
TS:
public myDatePickerOptions: IMyOptions = {
};
dateOptionsSelect = [
{ value: '1', label: 'Today', selected: true },
{ value: '2', label: 'Yesterday' },
{ value: '3', label: 'Last 7 days' },
{ value: '4', label: 'Last 30 days' },
{ value: '5', label: 'Last week' },
{ value: '6', label: 'Last month' }
];
selectedValue = '1';
showSelectedValues() {
console.log('date picker', this.selectedDate);
console.log('select', this.selectedValue);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: Laptop
- Browser: Chrome
- OS: windows
- Provided sample code: No
- Provided link: No