HTMLフォームで日付入力対応

2025.01.07 09:00
2025.01.07 10:43
HTMLフォームで日付入力対応

いつのまにかHTMLフォームが日付入力対応していました。
ということで試してみます。

まずは完成形から。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css">
  </style>
</head>
<body>


<input type="time"><br>
<input type="date"><br>
<input type="datetime-local">

</body>
</html>

ブラウザごとに表現は違うでしょうが、日付時間用の表示になりました。
さらに入力範囲の制限もできるみたいです。まずはサンプル。
コードはこんな感じ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css">
  </style>
</head>
<body>


<form>
  <input type="time" min="10:00" max="13:00"><br>
  <input type="date" min="2025-01-01" max="2025-12-31"><br>
  <input type="datetime-local" min="2025-01-01T10:00" max="2025-12-31T13:00">
  <br>
  <input type="submit" name="">
</form>

</body>
</html>

ちなみに「time」の「min」「max」は入力時じゃなくて、submit時に判定されるみたいですね。
これは使い所が微妙そう、、。

もちろんスタイルも当てられます。サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css">
    .select {
      padding: 10px;
    }
  </style>
</head>
<body>


<input type="time" name="" class="select"><br>
<input type="date" name="" class="select"><br>
<input type="datetime-local" name="" class="select">

</body>
</html>

他のフォーム同様、もっと細かいスタイルを当てることもできますね。

今回は以上です！