手机时间选择插件 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: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>

 

你可能感兴趣的:(jquery)