HTMLの <input type="date"> は、ユーザーにカレンダーから日付を選択させる便利な方法を提供します。
しかし、この要素のvalue属性は "yyyy-mm-dd" の形式で日付を受け取る必要があります。これは、JavaScriptの new Date() が返す日付オブジェクトと直接互換性がないため、少し手間がかかります。
この記事では、現在の日付をフォーマットし、要素の値として設定する方法を詳しく説明します。
HTMLの準備
まず、日付入力フィールドと「今日」ボタンを含む簡単なフォームを作成します。ボタンをクリックすると、フィールドに現在の日付が設定されるようにします。
<form>
<input type="date" id="today">
<button type="button" id="today-button">今日</button>
<button type="submit">送信</button>
</form>
JavaScriptでの日付フォーマット
次に、JavaScriptを使用して、現在の日付を "yyyy-mm-dd" 形式にフォーマットする関数を作成します。
この関数は、Dateオブジェクトを引数として受け取り（デフォルトでは現在の日付）、フォーマットされた文字列を返します。
const formatDate = (date: Date = new Date()) => {
const yyyy = date.getFullYear();
const mm = String(date.getMonth() + 1).padStart(2, "0"); // 月は0から始まるため、1を足す
const dd = String(date.getDate()).padStart(2, "0");
return `${yyyy}-${mm}-${dd}`;
};
コードの解説
- String関数
上記のコードの date.getMonth() と date.getDate() によって返される値は一桁である可能性があるので、二桁の文字列で返されるように、フォーマットします。
これにはpadStartメソッドを使いたいのですが、上記の２つのメソッドは 数値を返すので、まずは文字列に変換します。
String関数は、引数に渡された値を文字列に変換します。
例えば、 date.getDate() が 9 を返した場合、String関数によって "9" という文字列に変換されます
- padStartメソッド
padStartメソッドは、文字列の先頭に特定の文字を追加することで、文字列の長さを指定された長さまで増やすために使用されます。このメソッドは2つの引数を受け取ります：
-
目標の長さ: 文字列がこの長さに達するまで、指定された文字を先頭に追加
-
パディング文字（オプショナル）: 文字列の先頭部分に追加する文字。指定しない場合のデフォルト値はスペース(
" ")
上記のコードの padStart(2, "0") は、日付が一桁の場合（つまり、1〜9である場合）、その前に0を追加することで、常に二桁の文字列が得られるようにします。
結果として、"9"は"09"に変換され、"12"のようなすでに二桁の値は変更されません。
日付フィールドの値を設定
最後に、「今日」ボタンにイベントリスナーを追加して、クリックされた際、日付フィールドに現在の日付を設定します。この時、先に定義したformatDate関数を使用して、日付を正しい形式に変換します。
const todayField = document.getElementById("today") as HTMLInputElement;
const todayButton = document.getElementById("today-button") as HTMLInputElement;
if (todayButton && todayField) {
todayButton.addEventListener("click", () => {
todayField.value = formatDate();
});
} else {
console.error("要素が見つかりません。");
}
このコードにより、ユーザーが「今日」ボタンをクリックすると、日付入力フィールドに自動的に現在の日付が設定されます。
これにより、ユーザー体験が向上し、特定のタスクにおいてユーザーが手動で日付を入力する手間を省くことができます。