Date picker - breaking change


Topic: Date picker - breaking change

Hutton pro asked 3 years ago

I had a working application including date pickers on various reactive forms which were working as expected. The backing control for each was always a typescript 'Date' type.

On updating from v7.2.0 to v7.5.2 all dates displayed when the form is patched from an object value are displaying in a strange format as shown in the image attached; the date to be displayed should be 2019-04-02enter image description here

Can you please assist? Thanks, Chris


Damian Gemza staff answered 3 years ago

Dear @Hutton

I would like to take a look at the code which is not working for you (both HTML and TS).

Without it, I won't be able to help you well.

Best Regards,

Damian


Hutton pro answered 3 years ago

Thanks Damian,

On replicating this error for you I notice that it is ISO formatted strings (that we get back from our webservice) that give this error since we have updated to v7.5.2.

You can replicate this error as follows:

TS

 ngOnInit() {
const product = {
  name: 'Test Product',
  startDate: new Date().toISOString()
};

this.productForm.patchValue(product);
}

HTML

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
  <div class="form-group row">
<label for="code" class="col-sm-3 col-form-label">Product Name</label>
<div class="col-sm-9">
  <input type="text" formControlName="name"
    class="form-control" id="name" placeholder="Product Name">
</div>
  </div>
  <div class="form-group row">
<label for="startDate" class="col-sm-3 col-form-label">Start Date</label>
<div class="col-sm-9">
  <mdb-date-picker id="startDate"
    [options]="myDatePickerOptions" [placeholder]="'Start Date'" formControlName="startDate" required>
  </mdb-date-picker>
</div>
  </div>
  </form>

Arkadiusz Idzikowski staff answered 3 years ago

Thank you for the code, we will take a closer look at this problem. The only workaround for now would be to patch date value using object format. Please take a look at the examples from our documentation (set default value section):

https://mdbootstrap.com/docs/angular/forms/date-picker/


Damian Gemza staff answered 3 years ago

Dear @Hutton

This problem will be resolved with the next release of MDB Angular.

Best Regards,

Damian


Hutton pro answered 3 years ago

That is great to hear. Many thanks Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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