[49-4] input要素で時間を入力してもらおう (datetime-local, date, month, week, time)

最終更新日:2018年01月31日  (初回投稿日:2013年03月29日)

<input>要素の「type属性」で「時間」に関するフォーム部品を作りましょう。

対応ブラウザでは、「カレンダー」などのピッカーや「スピナー( スピナー画像 )」が現れて、日付や時間を選ぶことができます。

下の表はインデックスになっています。各値をクリックすると、該当の項目にジャンプします。

  type属性の値 部品の役割
<input>要素で作る
「時間」関連の部品
type="datetime" 協定標準時による時間で日付と時刻の入力
この値は廃止になりました。
type="datetime-local"  new ローカルな時間で日付と時刻の入力
type="date"  new 日付の入力
type="month"  new 月の入力
type="week"  new 週の入力
type="time"  new 時刻の入力

2017年12月:値「datetime」が廃止になっているため、このページは全体的に書き直しました。

type="datetime-local" で「日付と時刻」を

<input type="datetime-local">は、日付と時刻の入力部品になります。

書式にはこんな決まりがあります。

  • 日時は「西暦-月-日 T 時:分:秒」で書く。
  • 西暦年は4桁、月日と時分秒は2桁の数字。時分秒の直前に大文字の「T」を入れる。
  • 時間は24時間表記。(例:午後6時ジャストは「T18:00:00」)
  • 秒は省略可。(最後の「:00」をとります。午後6時ジャストは「T18:00」でOK)
  • 秒は小数点以下の指定も可能。小数点(.)のあとに数字を続けます。

datetime-local の「required属性」を使ったサンプル

サンプルです。

お客様情報

サンプルの HTMLソースはこちら。

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日時:<input type="datetime-local" name="datetime" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

name属性で部品名をつけます。formのデータを扱うプログラムで、送信値と紐付けるためです。
また、required属性を指定しています。
日時を入力しないで送信ボタンを押すとすると、アラートが出ます。

対応ブラウザは Chrome, Opera, Edge
対応ブラウザでは「カレンダー」が表示され、日付を選ぶことができます。
(Edgeは独自のピッカーが出て日付を選べます。)
「スピナー( スピナー画像 )」で日付・時間を1つずつ選ぶこともできます。
下は Chrome での表示です。

IE, Safari は未対応。
iOS Safari は対応していますが、min, max, step属性に未対応。
Firefox は、ver.57 から対応となっていますが、実際は未対応のようです。
(2017年12月記 / 参考:Can I Use - datetime-local

datetime-local の「max, min, step, value属性」を使ったサンプル

min属性で最小値、max属性で最大値を指定できます。対応ブラウザでは、min属性〜 max属性の範囲しか選択できなくなります。
value属性初期値を書いて置くこともできます。
この場合、ユーザが何も選択しなくても value属性の値で送信されるので、required属性を書いても意味無し。

step属性は秒単位で指定します。
下のサンプルでは、step属性を 2時間ずつ(7200秒)に指定しています。

お客様情報

サンプルの HTMLソースはこちら。

<label>ご希望の日時:
  <input type="datetime-local" name="datetime" min="2018-01-01T09:00" max="2018-01-31T21:00" step="7200" value="2018-01-01T09:00"></label>

datetime-local の「list属性」を使ったサンプル

list属性は、<datalist>要素も併用します。
あらかじめ、選択肢のリストを作って置けて、ユーザーはその中から選択できます。

お客様情報

サンプルの HTMLソースはこちら。

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日時:
    <input type="datetime-local" name="datetime" list="datelist"></label>
    <datalist id="datelist">
      <option value="2018-01-01T13:00"></option>
      <option value="2018-01-02T13:00"></option>
      <option value="2018-01-03T13:00"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

対応ブラウザでは、下図のようなリストが表示されます。最終行の「その他...」でカレンダーが表示されます。

type="date" で「日付」を入力してもらおう

"date"は文字通り、日付け(年月日)をチョイスしてもらう部品です。
書式は「西暦-月-日」で、2018年5月1日なら「2018-05-01」です。

type="date" は、Firefox も一応カレンダーが表示されますが、中途半端な対応。
min, max, value属性の値を無視するので入力しにくいです。(2017年12月記)

date の「max, min, step, required属性」を使ったサンプル

type="date" では step属性1日単位の指定になります。
step属性を書かなければ初期値の1日ずつのステップになります。

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日:
    <input type="date" name="date" min="2020-01-05" max="2020-01-31" 
    step="7" value="2020-01-05" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

date の「list属性」を使ったサンプル

list属性は、<datalist>要素も併用します。
あらかじめ、選択肢のリストを作って置けて、ユーザーはその中から選択できます。

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日:
    <input type="date" name="date" list="3date" required ></label>
    <datalist id="3date">
    <option value="2020-01-01"></option>
    <option value="2020-01-02"></option>
    <option value="2020-01-03"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

type="month" で「月」を入力してもらおう

"month"は、年・月をチョイスしてもらう部品です。
書式は「西暦-月」で、2018年5月なら「2018-05」になります。

month の「max, min, step, required属性」を使ったサンプル

type="month" では step属性1ヶ月単位の指定になります。step属性を書かなければ初期値の1月ずつのステップになります。

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の月:
    <input type="month" name="month" min="2018-04" max="2018-12" step="2" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

month の「list属性」を使ったサンプル

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の月:
    <input type="month" name="month" list="3month" required></label>
    <datalist id="3month">
    <option value="2018-05"></option>
    <option value="2018-06"></option>
    <option value="2018-07"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

type="week" で「週」を入力してもらおう

"week"は、 をチョイスしてもらう部品です。
書式は「西暦-W週」で、「元旦のある週の月曜から日曜まで」が第一週で「W01」になります。2018年の第28週なら「2018-W28」になります。

week の「max, min, step, required属性」を使ったサンプル

weekの step属性は、1週間単位。step属性を書かなければ初期値の1週ずつのステップになります。
サンプルでは2週間のステップにしました。

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の週:
    <input type="week" name="week" min="2018-W01" max="2018-W26" step="2" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

week の「list属性」を使ったサンプル

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の週:
    <input type="week" name="week" list="3weeks" required></label>
    <datalist id="3weeks">
    <option value="2018-W14"></option>
    <option value="2018-W15"></option>
    <option value="2018-W16"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

type="time" で「時間」を入力してもらおう

"time"は、時間 をチョイスしてもらう部品です。
書式は「00:00:00」で、24時間表記で時分秒を表します。午後2時30分45秒なら「14:30:45」です。

  • 秒は省略可。(午後2時ジャストは「14:00」でOK)
  • 秒は小数点以下の指定も可能。小数点(.)のあとに数字を続けます。

time の「max, min, step, required属性」を使ったサンプル

weekの step属性は、秒単位で指定します。
サンプルでは30分(1800秒)のステップにしました。

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望時間:
    <input type="time" name="time" min="09:00" max="16:59" step="1800" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

time の「list属性」を使ったサンプル

お客様情報
<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望時間:
    <input type="time" name="time" list="3time" required></label>
    <datalist id="3time">
    <option value="09:00"></option>
    <option value="12:00"></option>
    <option value="15:00"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

ほかの属性で機能を追加できます

今回はサンプルで、min, max, step, required, list属性などを使ってみましたが、その他の属性も使って、さらに機能を追加できます。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「日付・時間」の選択の部品以外は、下記の一覧をご覧ください。

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

次回予告

次回は「数値」を入力するための部品 <input type="number"> を使ってみましょう。
これもHTML5からの新しい値です。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2023/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.