1. 类型滚动选择(时间段选择)
官网地址:https://demo.mobiscroll.com/jquery/select/#
需求图:
html代码:
<link href="{{ dynamic('/statics/Mobile/css/mobiscroll.min.css') }}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{{ dynamic('/statics/Mobile/js/jquery-1.8.3.min.js') }}"></script>
<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);//设置选择的日期
}
});