手机时间选择插件 Jquery

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

// 时间选择
var currYear = (new Date()).getFullYear()
var opt_data = {
preset: 'date', //日期
theme: 'android-ics light', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【wp light】【wp】
display: 'modal', //显示方式
mode: 'mixed', //操作方式【scroller】【clickpick】【mixed】
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
yearText: '年', monthText: '月', dayText: '日', //面板中年月日文字
endYear:, //结束年份
showNow:true,
nowText:'今天',
hourText:'小时',
minuteText:'分',
startYear:currYear,
display:'bottom',//显示方式【modal】【inline】【bubble】【top】【bottom】
};
$("#demos").mobiscroll(opt_data);插件的css和jshttp://files.cnblogs.com/xinlinux/mobiscroll.custom-2.13.2.min.csshttp://files.cnblogs.com/xinlinux/mobiscroll.custom-2.13.2.min.js

http://www.helloweba.com/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Mobiscroll</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


<link href="http://www.wglong.com/index/demos/mobiscroll/css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://www.wglong.com/index/demos/mobiscroll/js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script> <link href="css/mobiscroll.custom-2.13.2.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.13.2.min.js" type="text/javascript"></script></head><body>
<input id="demos" name="scroller" /> <script type="text/javascript">
var currYear = (new Date()).getFullYear()
var opt_data = {
preset: 'date', //日期
theme: 'android-ics light', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【wp light】【wp】
display: 'modal', //显示方式
mode: 'mixed', //操作方式【scroller】【clickpick】【mixed】
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
yearText: '年', monthText: '月', dayText: '日', //面板中年月日文字
endYear:, //结束年份
showNow:true,
nowText:'今天',
hourText:'小时',
minuteText:'分',
startYear:currYear,
display:'bottom',//显示方式【modal】【inline】【bubble】【top】【bottom】
};
$("#demos").mobiscroll(opt_data); /** $(function(){
var opt = {
preset: 'date', //日期
theme: 'sense-ui', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
endYear:2020 //结束年份
};
$("#scroller").mobiscroll(opt).date(opt);*/ //之前给群里共享发错了。记得之前写过一个，估计丢了。现在重写一个。并完善一下，下面注释部分是上面的参数可以替换改变它的样式
//希望一起研究插件的朋友加我个人QQ也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
// 直接写参数方法
//$("#scroller").mobiscroll(opt).date();
// Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
//具体参数定义如下
//{
//preset: 'date', //日期类型--datatime,
//theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
//【wp light】【wp】
//mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
//display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
//dateFormat: 'yyyy-mm-dd', // 日期格式
//setText: '确定', //确认按钮名称
//cancelText: '清空',//取消按钮名籍我
//dateOrder: 'yymmdd', //面板中日期排列格
//dayText: '日',
//monthText: '月',
//yearText: '年', //面板中年月日文字
//startYear: (new Date()).getFullYear(), //开始年份
//endYear: (new Date()).getFullYear() + 9, //结束年份
//showNow: true,
//nowText: "明天", //
//showOnFocus: false,
//height: 45,
//width: 90,
//rows: 3}
//});
</script>
</body>
</html>