HTML5規范里只規定date新型input輸入類型，并沒有規定日歷彈出框的實現和樣式。所以，各瀏覽器根據自己的設計實現日歷。
目前只有谷歌瀏覽器完全實現日歷功能。相信這種局面很快就會結束，所有的瀏覽器最終都將會提供原生的日歷組件。

如果你使用的是谷歌瀏覽器，那你就可以在下面的實例演示中看到這個漂亮的日期組件。用鼠標點擊輸入框，就能看到瀏覽器原生的日歷框。

約會日期：

如果你當前使用的瀏覽器還沒有實現日歷組件，下面的圖片你可以先睹為快。

無需任何的JavaScript，它變成了一個最基本的input類型?<input type=”date”/>

<label for="meeting">約會日期：</label><input id="meeting" type="date" value="2014-01-13"/>

<input type="date" name="p.applyDate" value="<fmt:formatDate value='${p.applyDate}' pattern='yyyy-MM-dd' />">
pattern 是時間格式類型，一定要與相應的type類型一致才能正確的讀取，不然的話就讀取不了相應的時間

HTML5讓Web程序員的工作變得異常簡單，不是嗎？不僅如此，我們得到的不僅僅只有一個“日期”類型的input，還有一系列相關的日期、時間參數讓我們自定義。我們雖然稱之為“日期”類型，但這里的type實際上是可以為“date”、“week”、“month”、“time”、“datetime”和“datetime-local”。下面我將用實例加圖文的方式向大家演示各種type的外觀表現。

需要提醒的是，下面的截圖都是在谷歌瀏覽器中效果，其它瀏覽器中顯示的樣子會稍有不同，但功能會是一樣的。

1. 日期(<input type=”date”/>)

這是最基本的日期選擇器，你只能從日歷中選擇某個日期。

請選擇日期：?

截圖：

2. 周(<input type=”week”/>)

這時，你選擇的就不是一個日期了，而是周。請注意周數顯示的方式。

請選擇周：?

截圖：

3. 月份(<input type=”month”/>)

這時你選擇的是月份，跟“date”類型比起來少了后面的日子數。

請選擇月：?

截圖：

4. 時間(<input type=”time”/>)

這是最簡單的一種顯示，沒有日歷，只能選擇時間。

請選擇時間：?

截圖：

5. 日期+時間(<input type=”datetime”/>)

既顯示日期組件，又顯示時間組件，其實就是“date”類型和“time”類型的組合。

請選擇日期和時間：?

截圖：

6. 本地日期時間(<input type=”datetime-local”/>)

顧名思義，就是用本地時間顯示。

請選擇日期和時間：?

截圖：

轉載于:https://www.cnblogs.com/zhangliang88/p/5467552.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML5中的时间类型，另外EL表达式的时间值来读取时间，并且还可以更改时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。