HTMLでinputタグのtype=”date”で日付を入力する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでinputタグのtype="date"で日付を入力する方法について解説しています。inputタグでtypeをdateに設定すると、日付入力のフォームを作成することができます。基本の設置方法と、カレンダー表示などの応用の使い方を覚えましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLでinputタグのtype=”date”で日付を入力する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

inputタグのtype=”date”で日付を入力する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

inputタグのtype属性をdateにする

フォーム入力において、inputタグはよく使われるとおもいます。その中でも日付入力はフォームにおいて使う場面が多くあるかと思います。日付を入力するときにはinputタグでtypeをdateに指定すると出力が統一されます。具体的には次のように書けます。

<input type="date"></input>

すると、以下の入力欄が表示されます。

これで自動で日付入力できる形式になりました。なお、ここから出力される値は年-月-日という形式になります。また、以下のように属性としてvalue=”年-月-日”と指定すれば、フォームに予め日付をセットすることもできます。

<input type="date" value="2020-05-01">

すると、HTMLを開いたときに画像のように日付が予め設定されます。

このままだと入力出来る日付はいつでもいいのですが、入力出来る日付に期間を設けたいときには属性にminmaxを指定すると適用されます。もちろんこちらの日付も年-月-日の形式で指定します。

<input type="date" min="2020-05-01" max="2020-05-31">

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

入力可能な書式

このフォームをクリックすると半角の数字が入力できるようになって年月日を直接入力できますし、あとはフォームの右側にカレンダーのようなUIが表示されてそこから日付を入力することができます。

日付を選択するUIはページを開いているブラウザやパソコン、スマホによって形式が違います。入力はある程度ルール化されているので、最終的な出力が一定になってサーバー側での日付の処理が簡単になります。

 

日付を入力してみよう

それでは実際に日付入力をしてみましょう。以下のHTMLをコピーして任意の場所に保存します。

<html>
    <head>
        <meta charset="utf-8">
        <title>Date Form</title>
    </head>
    <body>
        <label>
            日付を入力してください
            <input type="date">
        </label>
    </body>
</html>

保存したHTMLをダブルクリックすると、以下のように入力フォームがブラウザで表示されます。

 

監修してくれたメンター

メンター 三浦

モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。
TechAcademyジュニアではPythonロボティクスコースを担当しています。
好きな言語はpython, Node.js

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。