Datepicker set value programmatically


Topic: Datepicker set value programmatically

Life.appadmin pro premium asked 2 months ago

How to set Datepicker value programmatically using API response.

I tried this way,

this.validationForm.get('inputFeeldName')!.setValue(respnse.DateValue);

But this not worked.


Grzegorz Bujański staff answered 2 months ago

You can use the startDate input to set defaultValue.

In your TS:

value = new Date(2020, 5, 20);

in your HTML:

<mdb-form-control>
  <input
    mdbInput
    [mdbDatepicker]="datepicker"
    type="text"
    class="form-control"
    id="datepicker"
  />
  <label mdbLabel for="datepicker" class="form-label">Select a date</label>
  <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
  <mdb-datepicker [startDate]="value" #datepicker></mdb-datepicker>
</mdb-form-control>

Life.appadmin pro premium commented 2 months ago

This is the only default value. This is not shown as a selected date. because the text field is empty even use this default value.


Arkadiusz Idzikowski staff commented 2 months ago

@Life.appadmin In this case your solution was correct (assuming you attached formControlName directive to the datepicker input element). You just need to make sure that the response.DateValue is in js date object format, for example: setValue(new Date(2021, 10, 15))


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.2.0
  • Device: Laptop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No
Tags