手機時間選擇插件 Jquery

時間 2019-11-08

標籤手機時間選擇插件 jquery 欄目 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/javascript

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。