Input 日期、時間 標籤

簡介

Input 有許多常用的屬性，例 type="button" 、type="number"、type="password"、type="checkbox"、type="date" … 等，關於日期和時間類除了基本的 type="date" 外還有另外 4 個十分方便的屬性，以下就要來說明。

month 年月

<input type="month">

只會有年份和月份可以選取，又可以 設定預設值 value 和 限制可選範圍 [ 最早從min 、最後至 max ]

<input type= "month"
       value= "2020-05"
       min= "2020-03"
       max= "2020-10">

date 年月日

<input type="date"
       value="2020-06-25"
       min="2020-01-01" max="2020-12-31">

• 預設日期 value
• 限制可選日期起始日 min
• 限制可選日期結束日 max

time 時間

<input type="time"
       value="13:30"
       min="09:00"
       max="18:00">

關於時間的選擇還可以使用 step="1" 增加秒數欄位，但 目前這功能在有些瀏覽器會看不到的情況 ，使用時要注意。

datetime-local 本地年月日 + 時間

<input type="datetime-local"
       value="2018-06-12T19:30"
       min="2018-06-07T00:00"
       max="2018-06-14T00:00">

• 日期後要加上 T 就可再接上時間設定
• 時間可加上 step="1" 呈現秒數欄位

week 呈現年份 + 週數

<input type="week"
       min="2020-W26"
       max="2020-W30">

• 可使用 step="1" 代表可選擇每一週，step="2" 時就會是每月的 2 週才可選