set date in input box using mydatepicker in angular4

Question

I am using mydatepicker for showing date now I want to set date in input box for this I am using that code:-

    <my-date-picker  formControlName="myDate" [(ngModel)]="task.taskDateFormatted" [options]="myDatePickerOptionsinput" (calendarToggle)="onCalendarToggle($event)"  (dateChanged)="onDateChanged($event,task._id)" >
    </my-date-picker>

When I am using one date picker its working correct and set the value. But when I am using for multiple date-picker and each have different date then its showing error message.

    [(ngModel)]="task.taskDateFormatted"

I am using this syntax for setting date in input box. I am using this date picker https://www.npmjs.com/package/mydatepicker2 .

This is the error message :-

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '17 Jan 2019'. Current value: '16 Jan 2019' this is screenshot:-

https://www.screencast.com/t/etEFtqyq9

Thank you

Hello @Mangita. Could you please post your html and js code? — Abhijeet Chakravorty
@AbhijeetChakravorty from here you can check my html file codehttps://jsfiddle.net/dfo1e0t4/ — Mangita
@AbhijeetChakravorty jsfiddle.net/uhsxocLt this is server side code from where we are getting application tasks — Mangita
I believe you are in need of dynamic ngModels. Currently you have the same ngModel for all the <my-date-picker></my-date-picker> unless you have all different values for "task.taskDateFormatted". Are all the values dynamic? — Abhijeet Chakravorty

Abhijeet Chakravorty Abhijeet Chakravorty · Accepted Answer · 2019-01-18T06:36:45

Html code:

<p>
  application-detail works!
</p>

<form [formGroup]="myForm" novalidate>
  <my-date-picker id="input-zero"  [options]="myDatePickerOptions" formControlName="myDateZero" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-one" [options]="myDatePickerOptions" formControlName="myDateOne" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-two" [options]="myDatePickerOptions" formControlName="myDateTwo" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-three" [options]="myDatePickerOptions" formControlName="myDateThree" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-four" [options]="myDatePickerOptions" formControlName="myDateFour" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
</form>

Angular Code:

import {
        Component,
        OnInit
} from '@angular/core';

import {
        IMyOptions
} from 'mydatepicker';

import {
    FormGroup,
    FormBuilder,
    Validators
} from '@angular/forms';

@Component({
        selector: 'app-application-detail',
        templateUrl: './application-detail.component.html',
        styleUrls: ['./application-detail.component.css']
})
export class ApplicationDetailComponent implements OnInit {
        private checkData: Object;
        private myForm: FormGroup;
        private myDatePickerOptions: IMyOptions = {
                // other options...
                dateFormat: 'dd.mm.yyyy',
        };

        constructor(private formBuilder: FormBuilder) {}

        ngOnInit() {
            this.checkData = {
                a: new Date(),
                b: new Date(),
                c: new Date(),
                d: new Date(),
                e: new Date()
            }
                this.myForm = this.formBuilder.group({
                        myDateZero: ['', Validators.required],
                        myDateOne: ['', Validators.required],
                        myDateTwo: ['', Validators.required],
                        myDateThree: ['', Validators.required],
                        myDateFour: ['', Validators.required]
                        // other controls are here...
                });
        }

        onDateChanged(ev) {
                // You will be able to check the changed dates here.
            console.log(ev);
        }

        setDate(): void {
                // Set today date using the setValue function
                let date = new Date();
                this.myForm.setValue({
                        myDateOne: {
                                date: {
                                        year: date.getFullYear(),
                                        month: date.getMonth() + 1,
                                        day: date.getDate()
                                }
                        }
                });
        }

        clearDate(): void {
                // Clear the date using the setValue function
                this.myForm.setValue({
                        myDate: ''
                });
        }
}

set date in input box using mydatepicker in angular4

1 Answers