首页 > > 网页制作 > Javascript >

手机日期插件（转加上自己喜欢的）

2018-06-24 00:24:30来源：未知阅读 ()

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,
                //width: 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,
            //width: 90,
            //rows: 3,
            //minDate: new Date()  从当前年，当前月，当前日开始}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有