input要素の新しいtype属性値(日付関連)

input要素の日付関連の属性は以下のものがあります。 

  • datetime-local:ローカルな日時
  • date:年月日
  • month:年月
  • week:週
  • time:時分秒
  • datime:UTC時

datetime-localの例

inputタグのtype属性に「datetime-local」と指定すると、 UTC(協定世界時)によらないローカル日時の入力欄が作成されます。

<input type="datetime-local" name="datetime-local" />

min/max属性の例

min属性とmax属性を使うと、ユーザーが選択可能な期間を指定できます。

3日以内を指定した例

<input type="datetime-local" name="datetime-local" min="2014-03-25T00:00" max="2014-03-28T00:00" />

step属性の例

step属性を使うと、時分の入力の刻みを指定できます。単位は秒で60で1分刻みになります。

5分刻みの例

<input type="datetime-local" name="datetime-local" min="2014-03-25T00:00" max="2014-03-28T00:00" step="300" />

表示例

month属性の例

month属性を使うと、フォームパーツは年月の入力欄になり、年月を入力するコントロールが表示されます。min/max属性や、step属性も指定できます。step属性で12を指定すると、毎年同じ年のみ選択できます。

<input type="month" name="month" min="2014-03" step="12" />

表示例

week属性の例

week属性を使うと、フォームパーツは週の入力欄になり、週を入力するコントロールが表示されます。min/max属性や、step属性も指定できます。

<input type="week" name="week" min="2014-W04" max="2015-W30" step="1" />

表示例

 

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です