zoukankan      html  css  js  c++  java
  • 手机日期插件 (转加上自己喜欢的)

    https://www.mobiscroll.com/

    https://github.com/xfhxbb/LCalendar

    温馨提示:强烈建议使用:https://github.com/zhoushengmufc/iosselect

    不建议使用

    demo下载链接:http://download.csdn.net/detail/cometwo/9376336

    mobiscroll 扩展:http://download.csdn.net/detail/cometwo/9376397

    这里写图片描述 
    这里写图片描述 
    这里写图片描述 
    这里写图片描述

    上一个国产轻量级的:http://download.csdn.net/detail/cometwo/9394560

    这里写图片描述

    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <title>手机时间选择</title>
            <meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
            <meta name="apple-touch-fullscreen" content="YES">
            <meta name="format-detection" content="telephone=no">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <meta http-equiv="Expires" content="-1">
            <meta http-equiv="pragram" content="no-cache">
            <link rel="stylesheet" href="css/reset.css" />
            <link rel="stylesheet" href="css/bootstrap.min.css" />
            <link rel="stylesheet" href="css/common.css" />
            <link rel="stylesheet" href="css/info_self.css" />
    
            <script src="js/jquery-1.11.1.min.js"></script>
            <!--手机日期-->
            <script src="js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
            <script src="js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
    
            <link href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
            <link href="css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
            <script src="js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
            <script src="js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
    
            <!-- S 可根据自己喜好引入样式风格文件 -->
            <script src="js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
            <link href="css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
    
        </head>
        <script type="text/javascript">
            $(function() {
                var currYear = (new Date()).getFullYear();
                var opt = {};
                opt.datetime = {
                    preset: 'datetime'
                };
                opt.default = {
                    theme: 'android-ics light', //皮肤样式
                    display: 'modal', //显示方式 :modal(正中央)  bottom(底部)
                    mode: 'scroller', //日期选择模式
                    lang: 'zh',
                    startYear: currYear - 5, //开始年份currYear-5不起作用的原因是加了minDate: new Date()
                    endYear: currYear + 5, //结束年份
                    //minDate: new Date() //加上这句话会导致startYear:currYear-5失效,去掉就可以激活startYear:currYear-5,
                };
                $("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
                var optDateTime = $.extend(opt['datetime'], opt['default']);
                $("#appDateTime1").mobiscroll(optDateTime).datetime(optDateTime);
            });
        </script>
    
        <body>
            <h1>之所以可以显示上下午是修改了源文件mobiscroll.datetime-2.5.1-zh.js</h1>
            <dd class="info_list mt10">
                <span class="inDis lable_tit" style="color: red;font-size: 25px;">时间选择</span>
                <div class="inDis input_w">
                    <input type="text" required name="VisitTime" id="appDateTime1" class="select_w" />
                    <i class="red">*</i>
                </div>
            </dd>
            <h2>修改后的文件</h2>
            <pre>
                (function ($) {
            $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, {
            dateFormat: 'yyyy-mm-dd',
            dateOrder: 'yymmdd',
            dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'],
            dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
            dayText: '日',
            hourText: '时',
            minuteText: '分',
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            monthText: '月',
            secText: '秒',
            timeFormat: 'HH:ii',
            timeWheels: 'HHii',
            yearText: '年',
            ampmText:'上午/下午',
            timeFormat: 'A',
            timeWheels: 'A'
    
        });
    })(jQuery);
            </pre>
            <h2>未修改的文件</h2>
            <pre>
    
    (function ($) {
        $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, {
            dateFormat: 'yyyy-mm-dd',
            dateOrder: 'yymmdd',
            dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'],
            dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
            dayText: '日',
            hourText: '时',
            minuteText: '分',
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            monthText: '月',
            secText: '秒',
            timeFormat: 'HH:ii',
            timeWheels: 'HHii',
            yearText: '年'
        });
    })(jQuery);
    
            </pre>
          <h2>mobiscroll简单配置参数</h2>
           <pre>
                    //下面注释部分是上面的参数可以替换改变它的样式
                    //希望一起研究插件的朋友加我个人QQ:1010305129也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
                    // 直接写参数方法
                    //$("#scroller").mobiscroll(opt).date(); 
                    // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
                    //具体参数定义如下
                    //{
                    //preset: 'date', //日期类型--datatime --time,
                    //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,
                    // 90,
                    //rows: 3,
                    //minDate: new Date()  从当前年,当前月,当前日开始}
           </pre>
        </body>
    
    </html>




    配置API

                //下面注释部分是上面的参数可以替换改变它的样式
                //希望一起研究插件的朋友加我个人QQ:1010305129也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
                // 直接写参数方法
                //$("#scroller").mobiscroll(opt).date(); 
                // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
                //具体参数定义如下
                //{
                //preset: 'date', //日期类型--datatime --time,
                //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,
                // 90,
                //rows: 3,
                //minDate: new Date()  从当前年,当前月,当前日开始}
  • 相关阅读:
    远程支付技术方案
    软件架构设计(第2版)——程序员向架构师转型必备
    概念架构是什么
    项目报警机制
    编写有效用例
    移动支付的基本要素
    相机的日常维护和保养注意事项
    吴炜摄影教程随堂笔记1
    D80使用心得3
    项目沟通管理识别干系人
  • 原文地址:https://www.cnblogs.com/Byme/p/7611455.html
Copyright © 2011-2022 走看看