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


相关文章

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

    延伸阅读