LoginSignup
53

More than 5 years have passed since last update.

HTMLのinputにカレンダーから日付を入力

Last updated at Posted at 2018-04-12

管理画面などで見かける日付入力時に出てくるカレンダーですが、
今までJavaScriptなどを使わないとできないと思っていました。

HTML5ではinputタグのtype属性にdateを指定するだけで、
カレンダーを出せるみたいです。

サンプル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>test</title>
  </head>

  <body>
    <!-- 日付入力 -->
    <input type="date"></input>
  </body>
</html>

よくある入力欄
2018-04-12_23h27_48.png
カレンダー出たー!
2018-04-12_23h14_36.png
選択できたー!
2018-04-12_23h28_06.png

min属性やmax属性を追加して最小値最大値も指定できるっぽい。

サンプル2
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>test</title>
  </head>

  <body>
    <!-- 日付入力 -->
    <input type="date" min="2018-04-08" max="2018-04-14"></input>
  </body>
</html>

灰色になって選択できなーい!(ちょっと薄い・・・)
2018-04-12_23h38_31.png

管理画面のMock制作中に調べていたら、これを見つけて驚きました。

これまでフロント側を作る機会がなかったので、
これからはフロント側もちょっとは勉強しようかなぁ。
はやりのjsとかとか。。

ところで、後述のmozillaのドキュメントですが、
ページ内でお試し実行できるようになったんですね。
これにも驚きました。便利な時代だ。

以上です。

参考:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date
http://www.htmq.com/html5/input_type_date.shtml

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
53