Topic: Correct way to retrieve value from mdb-datepicker

Dave Moniz priority asked 3 years ago


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?


Arkadiusz Idzikowski staff answered 3 years ago


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');
  }

Dave Moniz priority commented 3 years ago

Can confirm this works - thank you!


Dave Moniz priority answered 3 years ago


Thanks for your help. Closing this now.


Grzegorz Bujański staff answered 3 years ago


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

thanks for the awesome information. https://ometv.onl https://chatroulette.top https://omegle.wtf https://bazoocam.cam


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: Yes
  • Provided link: No