首页
前端开发
HTML5
jQuery手机端时间选择器

jQuery手机端时间选择器

0 次浏览 0 条评论
zip
zip

手机端表单的时间选择器，用得最多的还是基于 jQuery 的控件。专为触摸操作设计，像 mobiscroll 或 datetimepicker 这样的插件，滑动选择，手感还挺顺的，用户体验也不错。

jQuery 的好处就是上手快，插件多。你只要在 input 上挂个选择器，调用一下插件方法，基本就能跑起来。比如：

$(document).ready(function () {
  $('#timePicker').mobiscroll().datetime({
    theme: 'ios',
    display: 'bottom',
    mode: 'scroller',
    timeFormat: 'HH:mm',
    datetimeFormat: 'yyyy-MM-dd HH:mm'
  });
});

像上面这种写法，主题、显示方式、时间格式都能自定义，调起来还挺灵活。你要是做后台管理系统或者表单录入的项目，用它省事不少。

不过有个小提醒：手机端浏览器对原生 <input type="time"> 支持有差异，控件样式也不好统一。所以还是推荐用插件，尤其你想搞个统一风格的时间选择器时。

插件选型上，mobiscroll 是个老牌工具，滑动选择的 UI 比较适合触屏；datetimepicker 也不错，偏传统但配置清晰。看项目需要，选一个就行。

另外，和后端交互的时候，时间格式要注意统一。不然前端选的是 HH:mm，后端一看懵了，那就尴尬了。用 Ajax 把数据发过去之前，先格式化一下，一下空值啥的，保险。

如果你正好在做移动端表单录入，或者想提升用户输入效率，不妨试试 jQuery 的时间控件。简单集成、样式友好，手感也不差。

zip 文件大小：68.79KB