[筆記] HTML5 Input time 時間格式

章節連結

• 官方說明
• Demo
• 相關文章

近日在網頁開發時，遇上要讓使用者填寫時間的狀況。第一直覺會想到 input time ，不過這個時間格式有個隱形的坑，它的 12 / 24 小時的選項，是根據使用者電腦端的設定來決定的。如此一來，就會造成在實際設計表單上，產生要不要設計「上午 / 下午 」的選單困擾。

---

官方說明

• MDN 上頭的文件提到：這個 <input type=’time’> 標籤會依照瀏覽器和使用者的電腦端時間設定來決定如何顯示。
  Safari 是不支援的，如果讀到這標籤，會轉換成 type=’text’ 的模式
• 使用者電腦端的設定若為 12 小時，那麼效果就是 hh:mm AM / hh:mm PM

文字方面，中文的話 AM / PM 會換成上午、下午，且他們會顯示在 hh:mm 的前面

---

Demo

---

相關文章

[筆記] Nuxt js 初探筆記 2 – 解決 Vuex 持久化問題

[筆記] 使用 Crypto.getRandomValues() 來抓取亂數

[筆記] Nuxt js 初探筆記 1 – 基礎環境建置

[筆記] Vuetify select autocomplete 套件限制多選數量

[筆記] 判斷瀏覽器為手機端還是 PC 端的方法

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 38 – 專案協作上的常見問題

[指南] 串接金流開發用 – 測試用信用卡產生器 Credit Card Generator

[指南] Emoji Finder 方便你於電腦中複製貼上 iOS 的表情符號

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 37 – 如何與工程師互動 2

[指南] Redirect Checker – 301, 302 以及更多的 http 狀態碼

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 36 – 如何與工程師互動

[指南] V-Calendar 限制時間選取範圍

[指南] Fast or Slow – 由 Wordfence 維護的網站測速工具

[筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 在靜態網站中獲取資訊

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 35 – 原型設計的種類與技巧

[筆記] Google SpreadSheet API V4 改版 – 當作前端開發所需的 API 來源

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 34 – 設計標註檔

[筆記] Echarts 利用 visualMap 讓折線圖實現分段不同顏色

[筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 BeautifulSoup 來解析網頁原始碼

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 33 – 切圖命名與格式

[筆記] 善用 ECharts 中的 MarkArea 和 MarkLine 來製作出圖表上區域色塊

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 32 – 設計規範

[筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 Requests 模擬請求和攔截回應

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 31 – 深色模式

[筆記] Dayjs 解決時區、夏令時間 和 UTC 間的轉換問題

[筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 從網頁溝通架構到爬蟲運作原理

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 30 – 頁面

[筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – Python 的基本語法

[筆記] Vue-ECharts Tooltip 套用 RWD 避免破版的相關設定

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 29 – 改變頁面狀態來提升使用者體驗

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 28 – 響應式排版

[筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 網頁爬蟲的起源和處理策略

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 27 – 高轉換的登陸頁

[筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 資料科學與網頁爬蟲

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 26 – 模板

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 20 – GCP 儲存類別和生命週期

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 25 – 運用常見的介面版型排出好設計

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 19 – GCP Cloud Storage 架構和版本控管

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 24 – 頁尾

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 18 – GCP Cloud Storage

[筆記] Vue-ECharts RWD 設定與封裝

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 23 – 頁首

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 17 – AWS EC2 vs GCP Compute Engine

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 22 – C.R.A.P. 四個幫助你優化介面的設計準則

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 16 – Machine Image

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 21 – Form 表單

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 15 – Persistent Disk 方案比較

[筆記] Vue-cli HTTP 431 Error 錯誤排查解決記錄

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 20 – DataTable 資料表

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 19 – Alert 警告訊息

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 14 – GCP Local SSD vs Persistent Disk

[指南] Vue-Router 的巢狀路由和 Empty View 妙用

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 13 – GCP Compute Engine

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 18 – Modal 互動視窗

[筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 12 – GCP Security Rules

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 17 – Card 卡片

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 16 – Tooltip 提示工具

[筆記] 初次開發 Google Chrome 套件時要注意的事項

[指南] 前端工程師開發必備的 Heroku + Node.js 佈署自己的 CORS 轉址伺服器

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 15 – 摺疊面板

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 14 – 導覽元件

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 13 – 通用設計

[指南] Vue3 搭配 vue-i18N 的全域注入設定

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 12 – 色彩

[筆記] 用 vuex-persistedstate 來保持你的 vuex 狀態

[指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 佈署階段

[指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 開發階段

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 11 – 文字

[筆記] 用 Python 批次轉換經緯度實作 – 注意事項

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 10 – 連結和圖示

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 9 – 單選按鈕和複選框

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 8 – Input 輸入格

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 7 – 物件狀態

[指南] JSON Formatter / Differ 驗證和比較你的 JSON 檔

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 6 – 按鈕

[指南] AbuseIPDB 查詢和回報可疑的 IP 位置資訊

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 5

[指南] Vue-Cli 發佈時輸出 Copyright 於 CSS 和 JS 檔內

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 4

[筆記] Bootstrap 5 新增自適應 RWD 的字體大小

[筆記] JavaScript 強迫終止瀏覽器的 Request 指令

[筆記] Google Chrome 實驗中的便利新功能 – 閱讀清單

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 3

[筆記] Bootstrap 5 Icons 無論你是否有用 Bootstrap 都可用

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 2

[筆記] JQuery 中的 .data() 方法妙用

[指南] IconDuck 免費圖示 ICON 集合下載站

[筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 1

[筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 5

[筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 4

[筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 3

[筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 2

[筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 1

[筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 15

[筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 14

[指南] 用 Vue-SFC-Rollup 開發 Vue 2 版本套件

[筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 13

[指南] Kaspersky Mac 造成的 curl 連線失敗問題解決方式

[筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 12

[指南] 用 Python 批次轉換經緯度實作

按讚加入粉絲團

延伸閱讀

• [筆記] 使用 Crypto.getRandomValues() 來抓取亂數
• [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – Selenium 的簡介
• [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 為什麼抓不到動態資料
• [筆記] Nuxt js 初探筆記 1 – 基礎環境建置
• [筆記] Bose SoundLink Revolve 喇叭無法正常充電，該怎麼辦