mobiscroll仿ios滚动插件实例：日期滚动插件类型滚动选择

1. 类型滚动选择（时间段选择）

官网地址：https://demo.mobiscroll.com/jquery/select/#

需求图：

html代码：

<script type="text/javascript" src="{{ dynamic('/statics/Mobile/js/mobiscroll.min.js') }}"></script>

/* mobiscroll只支持jq，不支持zepto */

<input type="text" placeholder="请选择到店时间" value="请选择到店时间" class="timeChoice" id="timeChoiceInput" readonly="readonly" />
<div class="" style="display: none;">
　　<select id="timeChoice" data-type="selectP">
　　　　{% for item in shop_info.workTime %}
　　　　　　<option>{{ item | default('') }}</option>
　　　　{% endfor %}
　　</select>
</div>

<!--

　　1.外面放置一个input的目的是让当前选择的类型有个默认的值placeholder

　　2.input要设置 readonly="readonly"属性，这样在手机上就不会获取到焦点调起键盘；

　　3.select是插件渲染的滚动区域，这里我用的是模板渲染，也可以在插件调用出设置动态的data数据；

-->

js代码：

//全局设置
mobiscroll.settings = {
　　theme: 'ios',
　　lang: 'zh',
　　display: 'bottom'
};

//设置滚动选择的值到input
$('#timeChoice').mobiscroll().select({
　　group: true,

　　dara:“ 此处可以放置请求来的动态数据 ”
　　onSet:function(obj,inst){
　　　　$('#timeChoiceInput').val(obj.valueText);
　　}
});

//点击input调起插件
$("#timeChoiceInput").click(function() {
　　$('#timeChoice').mobiscroll('show');
　　return false;
})

2. 日期滚动选择

需求图：

html代码：

<p class="mk-ml20 mk-mr20 mk-bottom-line" id="dataChoice" style="overflow: hidden;">
　　<span class="data_span">日期</span>
　　<em class="data_em"><em id="data_times">请选择到店日期</em><i class="icon iconfont icon-icon07"></i></em>
</p>

js代码：

//预约今天之后的一个月之内的日期
var now = new Date();
var max = new Date(now.getFullYear(), now.getMonth()+1, now.getDate());
var instance = mobiscroll.date('#dataChoice', {
　　max: max,
　　min: now,
　　dateFormat:'yy-mm-dd',
　　onSet:function(event,inst){
　　　　$('#data_times').html(event.valueText);//设置选择的日期
　　}
});

mobiscroll仿ios滚动插件 实例：日期滚动插件 类型滚动选择

mobiscroll仿ios滚动插件实例：日期滚动插件类型滚动选择