手机时间选择插件 Jquery

最新推荐文章于 2024-04-29 17:01:02 发布

weixin_34210740

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量95

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinlinux/p/4134717.html

版权

//    时间选择
        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:2020, //结束年份
            showNow:true,
            nowText:'今天',
           hourText:'小时',
         minuteText:'分',
           startYear:currYear, 
            display:'bottom',//显示方式【modal】【inline】【bubble】【top】【bottom】
        };
        $("#demos").mobiscroll(opt_data);


插件的css和js


http://files.cnblogs.com/xinlinux/mobiscroll.custom-2.13.2.min.css

http://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 rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>-->
    <!-- <link href="http://files.cnblogs.com/xinlinux/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" /> -->
    <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:2020, //结束年份
                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>

转载于:https://www.cnblogs.com/xinlinux/p/4134717.html

weixin_34210740

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机时间选择插件 Jquery

// 时间选择 var currYear = (new Date()).getFullYear() var opt_data = { preset: 'date', //日期 theme: 'android-ics light', //皮肤其他参数【android-ics light】【an...
复制链接

扫一扫