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

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

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

需求图：

html代码：

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

　　
　　　　{% for item in shop_info.workTime %}
　　　　　　{{ item | default('') }}
　　　　{% endfor %}
　　

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代码：

　　日期
　　请选择到店日期

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);//设置选择的日期
　　}
});

 

转载于:https://www.cnblogs.com/qiuye812/p/10769871.html