2017.3.13
2019.3.13

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

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

input type="date"の場合

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型で動作してくれることを期待していたので、ちょっと残念。

input type="datetime-local"の場合

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が日付を認識してくれませんでした。

Angular】関連記事