Angular2 - 日期选择器的绑定答案

【问题标题】：Angular2 - Binding of datepickerAngular2 - 日期选择器的绑定
【发布时间】：2016-09-22 12:48:43
【问题描述】：

如何获取所选的输入日期并添加标签<p>。

我正在使用 jqueryUI 日期选择器，我已经尝试进行绑定尝试捕获更改和单击事件，但没有成功。

谁能帮帮我？

import "rxjs/Rx";
import {Component, AfterViewInit} from '@angular/core';

declare var $: any;

@Component({
    selector: '<my-evento></my-evento>',
    template: `<input (change)="updateDate($event)" type="text" id="datepicker">
               <p>{{ date }}</p>`
})

export class EventoComponent implements AfterViewInit{
    date: string;

    constructor(){}

    ngAfterViewInit() {
       $(function() {
            $("#datepicker").datepicker();
        });
    }

    updateDate($event): void {
        this.date = $event.target.value;
    }
}

【问题讨论】：

你可能想看看 ngModel angular.io/docs/ts/latest/api/forms/index/…
它只在我输入输入时进行绑定。 <input [(ngModel)]="date" type="text" id="datepicker"> 但是当我使用日历时不做绑定
注入一个'ChangeDetectorRef'angular.io/docs/ts/latest/api/core/index/…并调用markForCheck或detectChanges来触发更新。还可以查看DoChecklifecycle 钩子angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#docheck，您可以在ChangeDetectorRef 上拨打电话
我已经阅读并尝试过，但这有点令人困惑，您可以在我的示例中显示代码吗？
export class EventoComponent implements AfterViewInit, DoCheck{ constructor(private _cdr: ChangeDetectorRef) {} ngDoCheck() { this._cdr.detectChanges(); } }

标签： jquery jquery-ui angular data-binding datepicker

【解决方案1】：

当你像这样绑定模型时：

<input [(ngModel)]="date" type="date" id="datepicker">

编译器是否告诉你格式必须是 yyyy-dd-mm 格式？

如果是这样，您可能需要使用自定义 directive 或将日期字段与日期管道绑定，如下所示：

<input [ngModel]="date | date:'y-MM-dd'" (ngModelChange)="date=$event" type="date" id="datepicker">

【讨论】：