Correct way to retrieve value from mdb-datepicker

Topic: Correct way to retrieve value from mdb-datepicker

Dave Moniz priority asked 2 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?

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

You can retrieve information about new value from the component <code>dateChanged</code> event or from component input using Angular form controls (ngModel/formControl). Please note that <code>opened</code>, <code>closed</code> and <code>dateChanged</code> outputs are attached to the <code>mdb-datepicker</code> component and should be used on this element. Here is an example:

HTML:

<pre class="prettyprint"><code><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>
</code></pre>

TS:

<pre class="prettyprint"><code> value = new Date();

onModelChange(event: any): void {
    console.log('model change date', event);
  }

onDateChange(event: any) {
    console.log('event', event);
  }

onOpen() {
 console.log('open');
 }
</code></pre>

Please insert min. 20 characters.

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 2 years ago

Can confirm this works - thank you!

Add comment

Dave Moniz priority answered 2 years ago

0 0 Best answer

Thanks for your help. Closing this now.

Add comment

Grzegorz Bujański staff answered 2 years ago

0 1 Best answer

Please insert min. 20 characters.

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 2 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 2 years ago

Please add the TS and HTML code you are using. I'll check it.

Dave Moniz priority commented 2 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);
}

Please insert min. 15 characters.

Alex Sunny free commented 2 years ago

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

Add comment

Closed

This topic is closed.

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

Dave Moniz

479Support score
30Questions 31Answers 0Snippets