手机日期插件mobiscroll奇巧淫技&mobiscroll 中文API

温馨提示:强烈建议使用: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

这里写图片描述


"en">

    
        "UTF-8">
        手机时间选择
        "initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
        "apple-touch-fullscreen" content="YES">
        "format-detection" content="telephone=no">
        "apple-mobile-web-app-capable" content="yes">
        "apple-mobile-web-app-status-bar-style" content="black">
        "Expires" content="-1">
        "pragram" content="no-cache">
        "stylesheet" href="css/reset.css" />
        "stylesheet" href="css/bootstrap.min.css" />
        "stylesheet" href="css/common.css" />
        "stylesheet" href="css/info_self.css" />

        
        
        
        

        "css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
        "css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
        
        

        
        
        "css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />

    
    

    
        

之所以可以显示上下午是修改了源文件mobiscroll.datetime-2.5.1-zh.js

class="info_list mt10"> class="inDis lable_tit" style="color: red;font-size: 25px;">时间选择
class="inDis input_w"> type="text" required name="VisitTime" id="appDateTime1" class="select_w" /> class="red">*

修改后的文件

            (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);
        

未修改的文件


(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);

        

mobiscroll简单配置参数

                //下面注释部分是上面的参数可以替换改变它的样式
                //希望一起研究插件的朋友加我个人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()  从当前年,当前月,当前日开始}
       

配置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()  从当前年,当前月,当前日开始}

你可能感兴趣的:(web前端学习)