【jQuery】inputタグのtype="date"に今日の日付を入力する方法

inputタグとはHTMLで利用できる数あるタグのうちの１つであり、フォーム入力で使用されるタグです。formタグ内でinputタグは使用され、テキストボックスやラジオボタン、チェックボックスなどフォーム入力に必要な要素を生成します。

inputタグはタグ内で指定するtype属性によってフォーム上で入力できる型を指定できます。例えばtype属性にnumberを指定すると、次図のような数値入力フォームが表示されます。これはアルファベットや日本語の入力は不可、数値しか入力できないフォームとなります。

本記事で扱うtype属性はdateです。dateを指定することで日付の入力フォームとなります。ユーザーに生年月日や何かしらの時期を入力してもらう場合に利用する形式です。

Webアプリケーションでは日付を扱うことが多いです。しかしHTMLやCSSだけでは今日の日付データを取得することができません。そこで本記事ではjQueryを利用して今日の日付データを取得していきます。

jQueryで今日の日付を取得するにはnew Date()を使います。new Date()によって取得できる日付情報は以下のようになります。

$(function(){
    var now = new Date();
    console.log(now);
});

上記のログ出力より、new Date()により今日の日付や現在の時間、曜日などが取得できることがわかります。

サンプルで使用した$(function(){})は、HTMLコンテンツをすべて読み込んだ後（DOM構築後）にjQueryを実行したいときに利用するコードです。詳しくは以下記事をご参照ください。

【jQuery】ページを読み込んだあとに処理を実行：readyとloadの違いについて

new Date()で取得した情報は、各メソッドを使うことで年や月、日と個別に情報を取り出すことができます。個々に情報を取り出すことで、必要な形式に日付データを形成できます。

例えば年・月・日でデータを取得する場合は以下のようにコードを記入します。

$(function(){
    var now = new Date();
    // 年を取得
var yy = now.getFullYear();
// 月を取得
    var mm = now.getMonth() + 1;
    // 日を取得
var dd = now.getDate();
});

次にjQueryで取得した日付データを使って、inputタグに入力していきます。

まず日付データをinputタグに挿入できる形にする必要があります。inputタグのtype="date"ではvalue属性に次のように日付を入れています。

<input type='date' value='2023-06-09'>

つまり日付データは「yyyy-mm-dd」の形に生成する必要があるということです。jQueryでは以下のように記述します。

$(function(){
    var now = new Date();
    // 年を取得
    var yy = now.getFullYear();
    // 月を取得
    var mm = now.getMonth() + 1;
    // 日を取得
    var dd = now.getDate();
    // yyyy-mm-ddの形にする
    date = yy + '-' + mm + '-' + dd;
});

上記コードにより「yyyy-mm-dd」の日付データを生成することができます。

上記で生成した日付データをinputタグに挿入します。

$(function(){
    …
    // yyyy-mm-ddの形にする
    date = yy + '-' + mm + '-' + dd;
    // inputにdateを挿入する
    $('#today').val(date);
});

上記のコードで完成かと思われますが、実はこれではほとんどの場合でエラーが発生します。例えば2023年6月9日に上記のコードを実行すると変数dateに格納される値は「2023-6-9」となります。これではinputタグでこの日付を表示することはできません。

inputタグに日付を挿入するには「2023-06-09」といったように、月と日は2桁で表す必要があります。そのためにslice()メソッドを以下のように使いましょう。

$(function(){
    var now = new Date();
    // 年を取得
    var yy = now.getFullYear();
    // 月を取得
    var mm = now.getMonth() + 1;
    let month = ('0'+mm).slice(-2);
    // 日を取得
    let day = ('0'+now.getDate()).slice(-2);
    // yyyy-mm-ddの形にする
    date = yy + '-' + month + '-' + day;
    // inputにdateを挿入する
    $('#today').val(date);
});

月と日には先頭に0を追加して、末尾から2文字をスライスするようにしています。これにより2桁の月と日が生成でき、inputに適した日付データが完成します。

本記事「【jQuery】inputタグのtype="date"に今日の日付を入力する方法」はいかがでしたか。

inputタグに日付を入れることは難しくないことが分かったと思います。ただ月や日を2桁にしないとエラーが発生してしまうので、忘れずに2桁にしてから使うようにしましょう。