input type="date"の日付を表示・設定する

Angular2でinput type="date" または input type="datetime-local"を利用する際の日付の設定方法についてです。

HTML

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

TypeScript

export class ExampleComponent {
    exampleDate = this.getDateStr(new Date());

    // フォーマットした日付（yyyy-MM-dd）を取得
    getDateStr(dt: Date): string {
        // toISOString()だとUTC時刻が取得されてしまう
        // return dt.toISOString().substring(0, 10);

        var str = dt.getFullYear().toString();
        str = str + "-" + this.zeroPadding((dt.getMonth() + 1), 2);
        str = str + "-" + this.zeroPadding(dt.getDate(), 2);
        return str;
    }

    // ゼロパディング
    zeroPadding(n:number, d:number){
        return (Array(d).join('0') + n).slice(-d);
    }
}

日付を「yyyy-MM-dd」の形式にフォーマットしてしてあげないと入力欄に日付が表示されませんでした。Date型で動作してくれることを期待していたので、ちょっと残念。

HTML

<input type="datetime-local" [(ngModel)]="exampleDate">

TypeScript

export class ExampleComponent {
    exampleDate = this.getDateTimeStr(new Date());

    // フォーマットした日時（yyyy-MM-ddTHH:mm）を取得
    getDateTimeStr(dt: Date): string {
        // toISOString()だとUTC時刻が取得されてしまう
        // return dt.toISOString().substring(0, 16);

        var str = dt.getFullYear().toString();
        str = str + "-" + this.zeroPadding((dt.getMonth() + 1), 2);
        str = str + "-" + this.zeroPadding(dt.getDate(), 2);
        str = str + "T" + this.zeroPadding(dt.getHours(), 2);
        str = str + ":" + this.zeroPadding(dt.getMinutes(), 2);
        return str;
    }

    // ゼロパディング
    zeroPadding(n:number, d:number){
        return (Array(d).join('0') + n).slice(-d);
    }
}

input type="date"の時とほとんど同じですが、日時の場合は「yyyy-MM-ddTHH-mm」の形式にフォーマットしてしてあげないとinputが日付を認識してくれませんでした。