1. 首頁
    2. >>
  2. 筆記 Notes
    3. >>
  3. [筆記] HTML5 Input time 時間格式

[筆記] HTML5 Input time 時間格式

Posted onAuthorANDY LIEN

章節連結

近日在網頁開發時，遇上要讓使用者填寫時間的狀況。第一直覺會想到 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

相關文章

  • [筆記] 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 批次轉換經緯度實作
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 10
  • [筆記] Python3 Portable 免管理員權限版本
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 9
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 8
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 7
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 6
  • [指南] 用 Vue-SFC-Rollup 在 NPM 發佈你的第一個 Vue 套件
  • [指南] JSON Diff – 讓你快速判別兩個 JSON 檔間的差異
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 5
  • [筆記] Google / 百度 Baidu 中文地址轉換經緯度平台
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 4
  • [筆記] ECharts 客製化 Tooltip
  • [筆記] jQuery Bootstrap 藉由 CSS 開關調整 Dropdown 的方式
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 3
  • [筆記] jQuery DataTable 輸出 Excel 的設定調整初嘗試
  • [筆記] Vue3 / Vue-cli4 與 Vuex, TypeScript 和 Vue-i18N 的實作
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 2
  • [筆記] Vue3 / Vue-cli4 在 Composition API 中取得 Vue Instance
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 16
  • [筆記] WordHTML 將 Word 排版迅速轉換成 HTML 格式
  • [筆記] 將 Google Sheet 變身成 API Server ( 匯入 JSON 和輸出 JSON )
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 14
  • [筆記] Textgen 附有白話、文言文等選項的中文假字產生器
  • [指南] 整合 Vue-i18N 國際化 和 TypeScript 到現有的 Vue 2.X 專案
  • [指南] 前端開發 JSON-server 由多個 json 檔來快速模擬 Restful API
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 13
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 12
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 10
  • [指南] jQuery 浮動跳出框 ( Modal ) 的按鈕事件記得取消
  • [指南] 來訓練你對字距的感覺 前端設計 KernType
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上 Tooltip
  • [指南] 輕量化的 JavaScript i18N 多國語言套件
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 9
  • [筆記] jQuery 搭配 Async / Await 一同使用
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 8
  • [指南] Amazon Amplify 初探 – 佈署一個結合身分認證的 Vue.js 應用
  • [指南] npm 預設下載來源更改 – 因應中國的特殊規矩
  • [指南] 解決中國境內無法使用 raw.githubusercontent.com 下載套件的問題
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
  • [筆記] Lodash 比較物件 Object 是否更動的一些細節
  • [筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果
  • [筆記] TypeScript + D3.js + Vue 3 – 初探 & 畫個長條圖
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 6
  • [指南] Vue TestCafe + TypeScript 導入 E2E 測試
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 4
  • [指南] Windows 中用 DOS 輸出資料樹狀圖
  • [指南] Amazon EC2 安裝 Matomo ( Google Analytics ) 來代替 Google Analytics
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 3
  • [筆記] Vue 2 導入 TypeScript 相關記事
  • [指南] 運用 BrowserSync 來重整頁面 達成 Hot Reload
  • [筆記] Vuetify + Babel + Vue.config.js 最佳化實踐
  • [指南] Vue 結合 StyleLint 來統一你的 CSS 樣式
  • [指南] Vue 結合 ESLint 來格式化你的程式碼
  • [指南] 替 IDE 換個喜歡的開發字型吧 Dev Fonts 提供線上預覽
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 2
  • [筆記] 用 Powershell 解決非系統管理員無法新增永久環境變數的問題
  • [指南] Vue 整合最新版本的 Swiper 輪播套件
  • [指南] Vulnerability DB by Snyk 套件漏洞查詢好幫手
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 1
  • [筆記] jQuery Smart Wizard 5 對使用者和開發者都友善的引導頁面
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-6
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-5
  • [指南] 前端自動化開發 Gulp + PHP + Browserify
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-4
  • [指南] CSS Background Patterns 簡易單色背景 CSS 語法產生器
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-3
  • [指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-2
  • [指南] 遠端開發實作 – 搭配 Amazon AWS EC2 – Node.js 伺服器設定
  • [指南] 網頁前後端分離開發 常見的跨網域問題解決方式一覽
  • [指南] 給初心者在 AWS EC2 Linux 主機安裝 Laravel 的排解指南
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載 – 1
  • [筆記] Vue 按鈕 / 篩選資料架構
  • [指南] Windows 上使用免安裝 Node.js + Git Bash
  • [筆記] 2020 第二次前端工程師面試全記錄
  • [指南] Heroicons 開源免安裝 直接複製貼上的 SVG 圖示
  • [指南] Mac 上的快速架站好幫手 MAMP
  • [指南] 你真的需要 jQuery 嘛？ jQuery 和 Vanilla JavaScript 轉換對照表
  • [指南] Vue.js 搭配 Docker 進行佈署
  • [筆記] 簡易型筆記本 Nute 瀏覽器輸入直接存成 TXT 檔
  • [筆記] Vue-Carousel 輕量化輪撥套件介紹
  • [指南] Embed Responsively 幫助 Google Maps, Youtube ….等加上自適應 RWD 效果
  • [指南] Chart.js 前端圖表實用工具
    • 按讚加入粉絲團

    延伸閱讀