Angular2 - datepicker的绑定

时间:2016-09-22 12:48:43

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

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

我正在使用jqueryUI datepicker,我已经尝试使用更改和单击事件来捕获绑定,但是没有用。

有人能帮助我吗?

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

1 个答案:

答案 0 :(得分:2)

当你像这样绑定模型时:

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