[笔记] 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


相关文章

  • [指南] 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 批次转换经纬度实作
  • [笔记] 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
  • 按赞加入粉丝团

    延伸阅读