mobiscroll

mobiscroll一款使用简单而强大的JQ插件，依赖文件可以在我的github中找到，这种timepicker在手机端还是非常常见的，实用！

基本使用

引入依赖文件
<link rel="stylesheet" href="mobiscroll.custom-2.17.0.min.css">
<script src='jquery.min.js'></script>
<script src='mobiscroll.custom-2.17.0.min.js'></script>

目标对象
<input id="demo" placeholder="Please Select..." />
<button id="show">show</button>
<button id="clear">clear</button>

初始化，及调用mobiscroll方法
$(function () {
    var now = new Date(),
        minDate = new Date(now.getFullYear() - 10, now.getMonth(), now.getDate()),
        maxDate = new Date(now.getFullYear() + 10, now.getMonth(), now.getDate());

    $('#demo').mobiscroll().datetime({
        theme: 'mobiscroll',
        lang: 'zh',
        display: 'bottom',
        min: minDate,
        max: maxDate,
        stepMinute: 1 , //设置分钟间隔

        dateFormat: 'yy-mm-dd', //日期格式
        // timeFormat: 'HH:ii', //事件格式 大写24H 小写12H
           // timeWheels: 'HHii'
           //dateOrder: 'ddyymm', //面板中日期排列格式

    });

    $('#show').click(function () {  
        $('#demo').mobiscroll('show');
        return false;  
    }); 

    $('#clear').click(function () {  
        $('#demo').mobiscroll('clear');  
        return false;  
    });
});

样式肯定不止这一种啦，更多使用demo请直接转官网demo.mobiscroll.com

修改基本样式

如果你愿意，当然后找一找还是能找到很多样式接口：
<style>
    .mbsc-mobiscroll .dwb0{
        color: red;
        /*确定按钮的颜色*/
    }
    .dw-ul{
        color: lightgrey;  
        /*所有字体的颜色*/
    }
    .dw-sel{
        color: brown;
        /*当前选中字体的颜色*/
    }
    ....    
</style>

效果预览

不要下手太重，轻轻戳我预览😁

不只是timepicker

看一个完整的例子

引入文件

<meta name="viewport" content="width:device-width,initial-scale=1.0">
<link rel="stylesheet" href="content/Content/mobiscroll-2.13.2.full.min.css">
<script src='jquery.min.js'></script>
<script src='content/Scripts/mobiscroll-2.13.2.full.min.js'></script>

HTML

<style>  
.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  
</style>  
<ul id="treelist"> 
  <li>  
      <span>奥迪</span>  
      <ul>  
          <li>奥迪A3</li>  
          <li>奥迪A4L</li>  
          <li>奥迪A6L</li>  
          <li>奥迪Q3</li>  
          <li>奥迪Q5</li>  
          <li>奥迪A4</li>  
          <li>奥迪A6</li>  
          <li>奥迪A1</li>  
          <li>奥迪A3(进口)</li>  
      </ul>  
  </li>  
  <li>  
      <span>宝马</span>  
      <ul>  
          <li>宝马X1</li>  
          <li>宝马i3</li>  
          <li>宝马1系</li>  
          <li>宝马3系</li>  
          <li>宝马5系</li>  
      </ul>  
  </li>  
  <li>  
      <span>奔驰</span>  
      <ul>  
          <li>奔驰A级</li>  
          <li>奔驰C级</li>  
          <li>奔驰E级</li>  
          <li>奔驰S级</li>  
          <li>奔驰GLK级</li>  
          <li>奔驰CLA级</li>  
          <li>奔驰CLS级</li>  
      </ul>  
  </li>
</ul>

JS

$(function () {
  var i = Math.floor($('#treelist>li').length / 2),  
      j = Math.floor($('#treelist>li').eq(i).find('ul li').length / 2);  
  $("#treelist").mobiscroll().treelist({  
      theme: "android-ics light",  
      lang: "zh",  
      defaultValue: [i,j],  
      cancelText: '取消',  
      placeholder: '选择车型',  
      headerText: function (valueText) { return "选择车型"; },  
      formatResult: function (array) { //返回自定义格式结果  
          return $('#treelist>li').eq(array[0]).children('span').text() +' --'+ $('#treelist>li').eq(array[0]).find('ul li').eq(array[1]).text().trim(' ');  
      }  
  }); 
}) 

效果预览

轻轻戳我预览😁，注意这个自定义用的文件上是mobiscroll-2.13.2.full.min文件哦。

API参考

初始化

theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode:'scroller',
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮
dateOrder: 'yymmdd', //面板中日期排列格式
headerText: function (valueText) { array = valueText.split('-'); return array[0] + "年" + array[1] + "月"+array[2]+"日"; }, //自定义弹出框头部格式
rows:5,//滚动区域内的行数 

Event

（1）onBeforeClose(valueText, btn, inst)
描述：在list关闭之前执行，如果返回false则不会关闭list。
demo：
$('#mobiscroll').mobiscroll().list({
    onBeforeClose: function (valueText, btn, inst) {
    }
});

（2）onBeforeShow(inst)
描述：在list显示之前执行的事件，一样如果返回false则list不会显示。
demo：
$('#mobiscroll').mobiscroll().list({
    onBeforeShow: function (inst) {
    }
});

（3）onCancel(valueText, inst)
描述：当取消按钮被点击的时候执行的事件。
demo：
$('#mobiscroll').mobiscroll().list({
    onCancel: function (valueText, inst) {
    }
});

（4）onChange(valueText, inst)
描述：当value值改变的时候执行
demo：
$('#mobiscroll').mobiscroll().list({
    onChange: function (valueText, inst) {
    }
});

（5）onClosed(valueText, inst)
描述：当list关闭的时候执行的回调函数
demo：
$('#mobiscroll').mobiscroll().list({
    onClosed: function (valueText, inst) {
    }
});

（6）onDestroy(inst)
描述：当miboscroll实例被destoroy的时候回调
demo：
$('#mobiscroll').mobiscroll().list({
    onDestroy: function (inst) {
    }
});

（7）onHide(inst)
描述：list 关闭的动画执行完毕后回调
demo：
$('#mobiscroll').mobiscroll().list({
    onHide: function (inst) {
    }
});

（8）onInit(inst)
描述：mobiscroll实例初始化完成后执行
demo：
$('#mobiscroll').mobiscroll().list({
    onInit: function (inst) {
    }
});

（9）onMarkupReady(html, inst)
描述：list的html代码已经生成，但是还没有显示到页面中的时候，这个时候可以进行标签的修改。例如添加自定义元素。它会在定位完成前执行。
demo：
$('#mobiscroll').mobiscroll().list({
    onMarkupReady: function (html, inst) {
    }
});

（10）onPosition(html, windowWidth, windowHeight, inst)
描述：list定位完成后调用（包括初始化完成以及大小/方向调整之后）
demo：
$('#mobiscroll').mobiscroll().list({
    onPosition: function (html, windowWidth, windowHeight, inst) {
    }
});

（11）onSelect(valueText, inst)
描述：当value被设置的时候，简单理解就是选择好了原始点击确定之后
demo：
$('#mobiscroll').mobiscroll().list({
    onSelect: function (valueText, inst) {
    }
});
（12）onShow(html, valueText, inst)
描述：当list出现的时候
demo：
$('#mobiscroll').mobiscroll().list({
    onShow: function (html, valueText, inst) {
    }
});

（13）onValueTap(item, inst)
描述：当用户点击list上面的值是调用
demo：
$('#mobiscroll').mobiscroll().list({
    onValueTap: function (item, inst) {
    }
});