[筆記] HTML5 Input time 時間格式

章節連結

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

html logo


官方說明

  • 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 批次轉換經緯度實作
  • 按讚加入粉絲團

    延伸閱讀