DatePicker : date displayed is not updated when we set a val


Topic: DatePicker : date displayed is not updated when we set a value programmatically

dimitribocquet pro asked 6 years ago

Hi,

I create a reactive form component with a datePicker field, and try to initiate it with a custom date. But when I do, everything looks good, except the big date displayed.

After some attempts, I found that the "tmp" variable is not updated. I have to update it myself.

Here is my code :

<form [formGroup]="form">
<mdb-date-picker #startedAtPicker id="started_at" name="started_at" formControlName="started_at" [options]="{closeAfterSelect: true}" placeholder="Start At" (dateChanged)="dateChanged($event)"></mdb-date-picker>

<div class="text-center mt-1-half">
<button mdbBtn class="mb-2 waves-light aqua-gradient" data-dismiss="modal" [disabled]="!form.valid" mdbWavesEffect rounded="true" (click)="onSubmit($event)">
<i class="fa fa-plus-circle"></i>
Create
</button>
</div>
</form>

export class MainHarvestCreateModalComponent implements OnInit, OnDestroy {

private form: FormGroup;
@ViewChild('startedAtPicker') startedAtPicker: MDBDatePickerComponent;

constructor(
private _fb: FormBuilder,
) {
this.form = _fb.group({
started_at: [moment().startOf('day').subtract(7, 'days').format('DD/MM/YYYY'), Validators.required],
});
}

ngOnInit() {
// Without this code, the date displayed is today
const startedAtDate = moment().startOf('day').subtract(7, 'days');
this.startedAtPicker.tmp = {
year: startedAtDate.year(),
month: startedAtDate.month() + 1,
day: startedAtDate.date(),
};
}
}


Damian Gemza staff commented 6 years ago

Dear dimitribocquet, Thanks for your report. I'll add this to our bugs list, and we'll fix it with future releases of MDB Angular. Best Regards, 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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No