转自：Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件。以及各种滑动插件
可以让用户很方便的只需要滑动数字既可以选择日期。Mobiscroll作为一款jQuery日期插件可以让用户自定义主题，完全通过CSS文件修改样式
最近开发html5+css3手机APP经常用到的，觉得非常好用，兼容性又好，用户体验又很棒，所以就整理出来分享给大家，还支持设置皮肤、显示方式、日期选择模式、日期格式、语言、是否现在显示、显示的文本内容、开始年份、结束年份
下面看看效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/normalize3.0.2.min.css" />
<link rel="stylesheet" href="css/style.css?v=7" />
<link href="css/mobiscroll.css" rel="stylesheet" />
<link href="css/mobiscroll_date.css" rel="stylesheet" />
<title>兼容PC和移动设备的日期选择jquery插件</title>
</head>
<body>
<section id="form">
<form action="">
<label>出生日期：</label>
<input type="text" name="USER_AGE" id="USER_AGE" readonly class="input" placeholder="请填写你的出生日期" />
<div class="clear h10"></div>
<input type="submit" id="tj" class="submit" value="提交" />
</form>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/mobiscroll_date.js" charset="gb2312"></script>
<script src="js/mobiscroll.js"></script>
<script type="text/javascript">
$(function () {
var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : 'date'};
opt.datetime = {preset : 'datetime'};
opt.time = {preset : 'time'};
opt.default = {
theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
dateFormat: 'yyyy-mm-dd',
lang: 'zh',
showNow: true,
nowText: "今天",
startYear: currYear - 50, //开始年份
endYear: currYear + 10 //结束年份
};
$("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));
});
</script>
</body>
</html>
上图的demo下载地址：http://pan.baidu.com/s/1hs0V7AO 提取密码：v5s3
相关链接：
1、官网网址：http://www.mobiscroll.com/
2、官网下载地址：https://code.google.com/archive/p/mobiscroll/downloads
3、百度云下载地址：http://pan.baidu.com/s/1dFICCjZ 提取密码：copz
4、百度云精简版下载：http://pan.baidu.com/s/1dERPKJn 提取密码：wc6o
5、多种滑动插件下载：https://demo.mobiscroll.com/#components
另一个版本的例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>时间选择</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/mobiscroll.custom-2.6.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mobiscroll.custom-2.6.2.min.css"/>
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.ue24{padding: 0;}
.xl_tab{width: 100%;border-bottom: 0.01rem solid #c7c7c7;}
.xl_tab ul{list-style: none;display: inline-block;width: 100%;}
.xl_tab ul li{width: 50%;float: left;text-align: center;}
.xl_tab ul li a{display: inline-block;font-size: 1rem;}
.xl_tab ul li .xza{color: #fb76a1;border-bottom: 0.1rem solid #fb76a1;}
.xl_rq{width: 100%;text-align: center;padding: 0.8rem 0;}
.xl_rq span{color: #fb76a1;}
.xl_rq img{width: 1.5rem;height: 1.5rem;}
.xiaoliang_ri{width: 100%;padding-bottom: 1rem;border-bottom: 0.01rem solid #c7c7c7;}
.xiaoliang_ri .ri_la{width: 100%;text-align: center;height: 2rem;line-height: 2rem;}
.xiaoliang_ri .ri_la span{font-size: 1.6rem;}
.xiaoliang_ri .ri_shuliang{width: 100%;text-align: center;margin-top: 0.8rem;height: 2.3rem;line-height: 2.3rem;}
.xiaoliang_ri .ri_shuliang span{font-size: 1.9rem;color: #fb76a1;}
.xiaoliang_yue .xl_yue{width: 50%;float: left;margin: 1rem 0;}
.xiaoliang_yue .yue_benyue{border-right: 0.01rem solid #c7c7c7;}
.xiaoliang_yue .xl_yue .yue_la{width: 100%;text-align: center;height: 2rem;line-height: 2rem;}
.xiaoliang_yue .xl_yue .yue_la span{font-size: 1.1rem;}
.xiaoliang_yue .xl_yue .yue_shuliang{width: 100%;text-align: center;height: 2.3rem;line-height: 2.3rem;}
.xiaoliang_yue .xl_yue .yue_shuliang span{font-size: 1.4rem;color: #fb76a1;}
.yue_xiangxi{width: 100%;margin-top: 1rem;background-color: #fff;}
.yue_xiangxi .xx_info{width: 92%;display:inline-block;height: 4rem;line-height: 4rem;padding: 0.3rem 0;border-bottom: 0.01rem solid #c7c7c7;margin: 0 1rem;}
.yue_xiangxi .xx_info img{height: 100%;float: left;}
.yue_xiangxi .xx_info span{height: 100%;}
.yue_xiangxi .xx_info .info_name{float: left;padding-left: 1rem;}
.yue_xiangxi .xx_info .info_danzi{float: right;padding-right: 1rem;}
</style>
</head>
<body class="pb-0">
<!--顶部logo+导航开始-->
<div class="header user_header navbar-fixed-top" id="top">
<div class="back_box pull-left">
<a href="javascript:window.history.go(-1);"></a>
</div>
<div class="title_box">
销量管理
</div>
</div>
<div class="user_edit">
<div class="ue24">
<div class="xl_tab">
<ul>
<li><a class="xza">个人销量</a></li>
<li><a>团队销量</a></li>
</ul>
</div>
<div class="jiaohuan" style="display:block;">
<div class="xl_rq">
<span id="aaaa">2017-18-12</span>
<img src="img/xiajiantou.png" alt="" id="chose">
<input type="hidden" value="" id="hide_aaa">
</div>
<div class="xiaoliang_ri">
<div class="ri_la">
<span>当日销量 (单)</span>
</div>
<div class="ri_shuliang">
<span>0</span>
</div>
</div>
<div class="xiaoliang_yue">
<div class="yue_benyue xl_yue">
<div class="yue_la">
<span>本月销量 (单)</span>
</div>
<div class="yue_shuliang">
<span>0</span>
</div>
</div>
<div class="yue_shangyue xl_yue">
<div class="yue_la">
<span>上月销量 (单)</span>
</div>
<div class="yue_shuliang">
<span>0</span>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div class="jiaohuan" style="display:none;">
<div class="xl_rq">
<span id="bbbb">2017-11-12</span>
<img src="img/xiajiantou.png" alt="" id="other_chose">
<input type="hidden" value="" id="hide_bbb">
</div>
<div class="xiaoliang_ri">
<div class="ri_la">
<span>当日销量 (单)</span>
</div>
<div class="ri_shuliang">
<span>0</span>
</div>
</div>
<div class="xiaoliang_yue">
<div class="yue_benyue xl_yue">
<div class="yue_la">
<span>本月销量 (单)</span>
</div>
<div class="yue_shuliang">
<span>0</span>
</div>
</div>
<div class="yue_shangyue xl_yue">
<div class="yue_la">
<span>总销量 (单)</span>
</div>
<div class="yue_shuliang">
<span>0</span>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div class="yue_xiangxi" style="display:none;">
<div class="xx_info">
<img src="img/user_1.png" alt="">
<span class="info_name">姓名</span>
<span class="info_danzi">+单数 ></span>
<div style="clear:both;"></div>
</div>
<div class="xx_info">
<img src="img/user_1.png" alt="">
<span class="info_name">姓名</span>
<span class="info_danzi">+单数 ></span>
<div style="clear:both;"></div>
</div>
</div>
</div>
</body>
<script>
$('.xl_tab ul li').click(function(){
$(this).find('a').addClass('xza');
$(this).siblings().find('a').removeClass('xza');
var aaazz = $(this).index()
$('.jiaohuan').eq(aaazz).show();
$('.jiaohuan').eq(1-aaazz).hide();
if(aaazz == 0)
{
$('.yue_xiangxi').hide();
}
else
{
$('.yue_xiangxi').show();
}
})
</script>
<script>
//时间插件
var currYear = (new Date()).getFullYear();
var opt = {
theme: "android-ics light",
display: 'modal', //显示方式
lang: "zh",
setText: '确定', //确认按钮名称
cancelText: "取消",
endYear: currYear,//结束时间
dateFormat: 'yyyy-mm-dd', //返回结果格式化为年月格式
dateOrder: 'yyyymmdd', //面板中日期排列格式
onBeforeShow: function (inst) {
// console.info( inst.settings.wheels);
},
headerText: function (valueText) { //自定义弹出框头部格式
array = valueText.split('-');
return array[0] + "年" + array[1] + "月" +array[2] + "日" ;
},
onSelect: function (valueText, inst) {//选择时事件（点击确定后），valueText 为选择的时间，
var selectedDate = valueText;
// console.log(selectedDate)
$('#aaaa').text(selectedDate)
$('#hide_aaa').val(selectedDate)
}
};
$("#chose").mobiscroll().date(opt);
var opt1 = {
theme: "android-ics light",
display: 'modal', //显示方式
lang: "zh",
setText: '确定', //确认按钮名称
cancelText: "取消",
endYear: currYear,//结束时间
dateFormat: 'yyyy-mm-dd', //返回结果格式化为年月格式
dateOrder: 'yyyymmdd', //面板中日期排列格式
onBeforeShow: function (inst) {
// console.info( inst.settings.wheels);
},
headerText: function (valueText) { //自定义弹出框头部格式
array = valueText.split('-');
return array[0] + "年" + array[1] + "月" +array[2] + "日" ;
},
onSelect: function (valueText, inst) {//选择时事件（点击确定后），valueText 为选择的时间，
var selectedDate = valueText;
// console.log(selectedDate)
$('#bbbb').text(selectedDate)
$('#hide_bbb').val(selectedDate)
}
};
$("#other_chose").mobiscroll().date(opt1);
</script>
</html>
1096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
