JQM 日期插件 mobiscroll

QQ截图20180608165659

http://www.mobiscroll.com/

http://code.google.com/p/mobiscroll/

<!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>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <!--Includes-->
	<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
	<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
  $(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>
</head>

<body>
<input id="scroller" name="scroller" />   


</body>
</html>

亲们,觉得日期界面不漂亮,看代码。我都写上每个参数的具体注释了。再看不懂,我也没办法了。

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 共1条

请登录后发表评论

    • 宇凡的头像-易微帮
    • AffiliateLabz0
      Great content! Super high-quality! Keep it up! 🙂
      4年前