首页
前端开发
HTML5
jQuery移动端日期选择插件

jQuery移动端日期选择插件

0 次浏览 0 条评论
rar
rar

移动端项目的日期选择器，用Mobiscroll真挺顺手的。它是个基于 jQuery 的插件，专门为触摸体验优化，滑动流畅，样式也挺多，想换个主题分分钟的事。除了基本的日历选取，它还能搞定时间选择、计时器这些花活儿，一套多个需求。

Mobiscroll 的安装方式也不复杂，支持 CDN 引入，直接在index.html里加上 JS 和 CSS 就能用了。文件从官网下，或者图省事就用 CDN，也挺稳定的。

初始化也简单，比如你有个#dateInput的输入框，只要套一句：

$(function () {
  $('#dateInput').mobiscroll({
    display: 'bubble',
    theme: 'ios',
    lang: 'zh',
    mode: 'scroller',
    dateOrder: 'ddMMyy',
    onSet: function (inst) {
      console.log('选择的日期：' + inst.value);
    }
  });
});

嗯，像主题切换、语言包这些它都支持，还能设定可选范围，比如只让选明天之后的日期。API 设计得比较清晰，开发时不会绕来绕去。

更有意思的是，它还能搞个计时器：

$(function () {
  $('#timer').mobiscroll({
    mode: 'timer',
    display: 'inline',
    stopOnHover: true,
    onSet: function (inst) {
      console.log('计时结束：' + inst.valueText);
    }
  });
});

在兼容性上，iOS、Android、甚至老点的浏览器它都能跑，适配得还挺稳。响应也快，不卡顿，移动端用起来手感不错。

如果你在搞H5 表单或者需要用户选日期/时间的场景，可以试试 Mobiscroll，省事又灵活。

rar 文件大小：66.38KB