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

2023.06.18 / 2023.06.18

本記事ではjQueryを利用した、inputタグのtype="date"に今日の日付を入力する方法について解説していきます。

Webアプリケーションを作成していると、inputタグに特定の日付を初期値として入力しておきたい場面があります。

ここでは今日の日付を入力するパターンについて解説していますが、ここで解説している内容を理解することで、現在から数日後や1週間後、1年後の日付をinputタグに入力することも可能です。

ぜひ本記事を通して、inputタグのtype="date"に今日の日付を入力する方法について理解を深めてください。

inputタグ：type="date"とは

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

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

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

jQuery：今日の日付の取得

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

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

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

console.log()で出力されるログ

Sat Jun 10 2023 13:05:42 GMT+0900 (日本標準時)

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

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

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

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

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

注意点

getMonth()メソッドは0～11の数値を返すため、返り値に「1」を足すことを忘れないでください

inputに入力できる形に日付を変更する

次に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」の日付データを生成することができます。

jQuery：inputのtype="date"に今日の日付を入力する

上記で生成した日付データを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に適した日付データが完成します。