Question

我现在正在使用mydatepicker显示日期，我想在输入框中为此设置日期，我正在使用该代码：-

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

当我使用一个日期选择器时，它可以正常工作并设置值。但是，当我使用多个日期选择器并且每个日期都有不同的日期时，则会显示错误消息。

    [(ngModel)]="task.taskDateFormatted"

我正在使用此语法在输入框中设置日期。我正在使用此日期选择器https://www.npmjs.com/package/mydatepicker2。

这是错误消息：-

错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。以前的值：'2019年1月17日'。当前值：'2019年1月16日' 这是屏幕截图：-

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

谢谢

Answer 1

HTML代码：

<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>

角度代码：

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: ''
                });
        }
}

在angular4中使用mydatepicker在输入框中设置日期

1 个答案: