这是一个适合移动设备WEB应用的日期和时间拾取器，在桌面版的日期拾取器我们一般用jQuery UI的datepicker插件，而移动手机版的日期拾取器则可以根据项目需求选择与jQuery Mobile配合的mobiscroll.js插件，它提供了友好的日期和时间选择操作界面，且易于配置和使用。
首先我们加载相关插件和样式文件，该插件基于jQuery和jQuery.mobile所以首先需要加载这两个库文件，然后再加载mobiscroll.js插件以及相关CSS文件。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script src="js/mobiscroll.js" type="text/javascript"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
接着在body里放置输入框，这是一个普通的文本输入框，当鼠标单击输入框获得光标时会触发mobiscroll弹出日期拾取器。
<input id="date" name="date" />
JavaScript
mobiscroll提供了许多选项可以设置，包括定义弹出面板展示方式、最大日期、最小日期、日期格式、结束年份等，也可以将插件本地化，包括设置中文按钮、说明。调用也非常简单，以下是示例代码：
$(function(){
var opt = {
preset: 'date', //日期
theme: 'sense-ui', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
hourText: '时',minuteText: "分",ampmText:"上午/下午",
endYear:2020 //结束年份
};
$("#date").mobiscroll().date(opt);
});
如果只选是时间，则可以这样写：
$("#time").mobiscroll().time(opt);
如果要在面板上显示日期和时间，则这样调用：
$("#datetime").mobiscroll().datetime(opt);
好我们再来看一些例子
自定义年月（去掉年月日的"日"滚轮布局）：
@{
ViewBag.Title = "taste mobiscroll";
}
@section styles{
<link href="~/Content/mobiscroll-2.13.2.full.min.css" rel="stylesheet" />
<style>
</style>
}
<div class="container">
<input id="date" />
</div>
@section scripts{
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/mobiscroll-2.13.2.full.min.js"></script>
<script>
$(function () {
$("#date").mobiscroll().date({
theme: "android-ics light",
lang: "zh",
cancelText: null,
dateFormat: 'yy/mm', //返回结果格式化为年月格式
// wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现
onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
headerText: function (valueText) { //自定义弹出框头部格式
array = valueText.split('/');
return array[0] + "年" + array[1] + "月";
}
});
})
</script>
}
treelist 示例一：
<style>
.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }
</style>
<ul id="treelist">
<li>普通班</li><li>VIP班</li><li>特色班</li><li>至尊班</li><li>女子特训班</li>
</ul>
<script>
$(function () {
$("#treelist").mobiscroll().treelist({
theme: "android-ics light",
lang: "zh",
defaultValue: [Math.floor($('#treelist li').length/2)],
cancelText: null,
headerText: function (valueText) { return "选择班级"; }
});
})
</script>
treelist 示例二：
<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>
<script>
$(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: null,
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(' ');
}
});
})
</script>