Topic: Correct way to retrieve value from mdb-datepicker
The [(ngModel)] is updated AFTER the (dateChanged) event. Also the object itself has no value output.
What is the expected way to acquire the new date value, especially within the (dateChanged) event?
You can retrieve information about new value from the component dateChanged event or from component input using Angular form controls (ngModel/formControl). Please note that opened, closed and dateChanged outputs are attached to the mdb-datepicker component and should be used on this element. Here is an example:
HTML:
<mdb-form-control>
<input
mdbInput
[mdbDatepicker]="datepicker"
type="text"
class="form-control"
id="exampleDatepicker1"
[ngModel]="value"
(ngModelChange)="onModelChange($event)"
/>
<label mdbLabel for="exampleDatepicker1" class="form-label">Select a date</label>
<mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
<mdb-datepicker #datepicker (dateChanged)="onDateChange($event)" (opened)="onOpen()"></mdb-datepicker>
</mdb-form-control>
TS:
value = new Date();
onModelChange(event: any): void {
console.log('model change date', event);
}
onDateChange(event: any) {
console.log('event', event);
}
onOpen() {
console.log('open');
}
Try this:
In your HTML file:
<mdb-form-control>
<input
mdbInput
[mdbDatepicker]="basicDatepicker"
type="text"
class="form-control"
id="exampleDatepicker1"
/>
<label mdbLabel for="exampleDatepicker1" class="form-label">Select a date</label>
<mdb-datepicker-toggle [mdbDatepicker]="basicDatepicker"></mdb-datepicker-toggle>
<mdb-datepicker #basicDatepicker (dateChanged)="onDateChanged(value)"></mdb-datepicker>
</mdb-form-control>
In your TS file:
onDateChanged(value) {
console.log(value)
}
Dave Moniz premium priority commented 3 years ago
Turns out: the problem is much larger.
None of the events on datepicker component are firing. I thought I must be doing it wrong but (valueChange) event on the select that I'm using fires correctly
Grzegorz Bujański staff commented 3 years ago
Please add the TS and HTML code you are using. I'll check it.
Dave Moniz premium priority commented 3 years ago
It's basically copy/paste of what you have but, if this is want
<div class="col-lg-3 col-xl-3">
<mdb-form-control>
<input mdbInput id="eventDatePicker" name="eventDatePicker" [mdbDatepicker]="eventDatePicker" type="text" class="form-control" [(ngModel)]="eventDate" (click)="eventDatePicker.open()" (opened)="onEventDateValueChanged(value)">
<label mdbLabel for="eventDatePicker" class="form-label">Event Date</label>
<mdb-datepicker-toggle [mdbDatepicker]="eventDatePicker"></mdb-datepicker-toggle>
<mdb-datepicker #eventDatePicker [format]="'ddd, mmm d, yyyy'" [startDate]="eventDate"></mdb-datepicker>
</mdb-form-control>
</div>
onEventDateValueChanged(value: any): void {
console.log(value);
}
Alex Sunny commented 3 years ago
thanks for the awesome information. https://ometv.onl https://chatroulette.top https://omegle.wtf https://bazoocam.cam
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 1.0.0-beta5
- Device: PC
- Browser: Google Chrome
- OS: Arch Linux
- Provided sample code: No
- Provided link: No