第五节：常用插件汇总(中英转换、省市区、LayUI的日期控件改造)

一. 插件汇总

1. 中英文转换

 参考地址：http://blog.haoji.me/pinyinjs.html#ru-guo-pin-yin-bu-xu-yao-sheng-diao   （含多音字、声调等多种用法）

 GitHub地址：https://github.com/sxei/pinyinjs

用法：

(1). 需要引入两个js文件

    <script src="js/utils/pinyin_dict_withtone.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/utils/pinyinUtil.js" type="text/javascript" charset="utf-8"></script>

(2). 然后直接调用相关方法即可

console.log(pinyinUtil.getPinyin('盖胖'));
console.log(pinyinUtil.getPinyin('盖二胖'));
console.log(pinyinUtil.getPinyin('欧阳石浩'));
console.log(pinyinUtil.getPinyin('颜peng'));

2. 省市区控件

 参考地址：https://www.cnblogs.com/JasonLong/p/5278955.html

用法：

(1).需要引入两个js文件

    <link href="js/city/css/jquery.city.css" rel="stylesheet" />
    <!-- <link href="js/city/css/animate.min.css" rel="stylesheet" /> -->
    <script src="js/city/js/jquery-1.10.2.js"></script>
    <script src="js/city/js/jquery.city.js"></script>

(2).初始化

 <input type="text" id="txt_city" class="form-control" />
 <script type="text/javascript">     
    $('#txt_city').jcity({
        urlOrData: 'js/city/js/citydata.json',
        // animate: { showClass: 'animated flipInX', hideClass: 'animated flipOutX' },
        showHot:false,
        onChoice: function (data) {
            // console.log(data);
        }
   });
 </script>

(3).效果

3. LayUI的日期控件格式改造

(1). 背景

　我们现在需要的时间格式为 01-Mar-2021，LayDate控件默认不支持，需要自己进行改造。

（独立版地址：http://www.layui.com/laydate/     文档地址：https://www.layui.com/doc/modules/laydate.html ）

(2). 改造与使用

A. 前端改造

源码：

/**
 
 @Name : layDate 5.0.9 日期时间控件
 @Author: 贤心
 @Site：http://www.layui.com/laydate/
 @License：MIT
 
源码修改：
    1. ypf注释掉了 格式不合法的提示，和错误标记，便于自定义格式处理(924行)  【2021-03-08】
    2. 下面将日期改造成正常格式 xxxx-xx 或 xxxx-xx-xx，使其赋值后打开，能选中原值 （位置：搜索xxxx-xx）  【2021-03-08】
    3. 解决了clear的bug，在使用的时候，done中要加一层判断if (JSON.stringify(date)!="{}")   【2021-03-11】
    4. 解决了laydate和EasyUI行编辑的冲突问题(关闭不了)。(250行 lay.elem = function(elemName, attr) )   【2021-03-11】
    5. 屏蔽confirm按钮的默认配置，confirm没有走done格式转换，现在不需要confirm时间    【2021-03-11】
    6. 修改了范围选择的时候，特殊日期格式的转换，注意调用的时候需要format指定格式，单选用法不变 (位置998行，1522)    【2021-03-23】
    7. 修改了428行默认格式 format: 'dd-MM-yyyy'， 为了适配 01-Mar-2021 这种形式的格式                           【2021-05-14】
 
 */
;
! function() {
    "use strict";

    var isLayui = window.layui && layui.define,
        ready = {
            getPath: function() {
                    var jsPath = document.currentScript ? document.currentScript.src : function() {
                        var js = document.scripts,
                            last = js.length - 1,
                            src;
                        for (var i = last; i > 0; i--) {
                            if (js[i].readyState === 'interactive') {
                                src = js[i].src;
                                break;
                            }
                        }
                        return src || js[last].src;
                    }();
                    return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
                }()

                //获取节点的style属性值
                ,
            getStyle: function(node, name) {
                    var style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null);
                    return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
                }

                //载入CSS配件
                ,
            link: function(href, fn, cssname) {

                //未设置路径，则不主动加载css
                if (!laydate.path) return;

                var head = document.getElementsByTagName("head")[0],
                    link = document.createElement('link');
                if (typeof fn === 'string') cssname = fn;
                var app = (cssname || href).replace(/\.|\//g, '');
                var id = 'layuicss-' + app,
                    timeout = 0;

                link.rel = 'stylesheet';
                link.href = laydate.path + href;
                link.id = id;

                if (!document.getElementById(id)) {
                    head.appendChild(link);
                }

                if (typeof fn !== 'function') return;

                //轮询css是否加载完毕
                (function poll() {
                    if (++timeout > 8 * 1000 / 100) {
                        return window.console && console.error('laydate.css: Invalid');
                    };
                    parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(
                        poll, 100);
                }());
            }
        }

        ,
        laydate = {
            v: '5.0.9',
            config: {} //全局配置项
            ,
            index: (window.laydate && window.laydate.v) ? 100000 : 0,
            path: ready.getPath

                //设置全局项
                ,
            set: function(options) {
                    var that = this;
                    that.config = lay.extend({}, that.config, options);
                    return that;
                }

                //主体CSS等待事件
                ,
            ready: function(fn) {
                var cssname = 'laydate',
                    ver = '',
                    path = (isLayui ? 'modules/laydate/' : 'theme/') + 'default/laydate.css?v=' + laydate.v + ver;
                isLayui ? layui.addcss(path, fn, cssname) : ready.link(path, fn, cssname);
                return this;
            }
        }

        //操作当前实例
        ,
        thisDate = function() {
            var that = this;
            return {
                //提示框
                hint: function(content) {
                    that.hint.call(that, content);
                },
                config: that.config
            };
        }

        //字符常量
        ,
        MOD_NAME = 'laydate',
        ELEM = '.layui-laydate',
        THIS = 'layui-this',
        SHOW = 'layui-show',
        HIDE = 'layui-hide',
        DISABLED = 'laydate-disabled',
        TIPS_OUT = '开始日期超出了结束日期<br>建议重新选择',
        LIMIT_YEAR = [100, 200000]

        ,
        ELEM_STATIC = 'layui-laydate-static',
        ELEM_LIST = 'layui-laydate-list',
        ELEM_SELECTED = 'laydate-selected',
        ELEM_HINT = 'layui-laydate-hint',
        ELEM_PREV = 'laydate-day-prev',
        ELEM_NEXT = 'laydate-day-next',
        ELEM_FOOTER = 'layui-laydate-footer',
        ELEM_CONFIRM = '.laydate-btns-confirm',
        ELEM_TIME_TEXT = 'laydate-time-text',
        ELEM_TIME_BTN = '.laydate-btns-time'

        //组件构造器
        ,
        Class = function(options) {
            var that = this;
            that.index = ++laydate.index;
            that.config = lay.extend({}, that.config, laydate.config, options);
            laydate.ready(function() {
                that.init();
            });
        }

        //DOM查找
        ,
        lay = function(selector) {
            return new LAY(selector);
        }

        //DOM构造器
        ,
        LAY = function(selector) {
            var index = 0,
                nativeDOM = typeof selector === 'object' ? [selector] : (
                    this.selector = selector, document.querySelectorAll(selector || null)
                );
            for (; index < nativeDOM.length; index++) {
                this.push(nativeDOM[index]);
            }
        };


    /*
      lay对象操作
    */

    LAY.prototype = [];
    LAY.prototype.constructor = LAY;

    //普通对象深度扩展
    lay.extend = function() {
        var ai = 1,
            args = arguments,
            clone = function(target, obj) {
                target = target || (obj.constructor === Array ? [] : {});
                for (var i in obj) {
                    //如果值为对象，则进入递归，继续深度合并
                    target[i] = (obj[i] && (obj[i].constructor === Object)) ?
                        clone(target[i], obj[i]) :
                        obj[i];
                }
                return target;
            }

        args[0] = typeof args[0] === 'object' ? args[0] : {};

        for (; ai < args.length; ai++) {
            if (typeof args[ai] === 'object') {
                clone(args[0], args[ai])
            }
        }
        return args[0];
    };

    //ie版本
    lay.ie = function() {
        var agent = navigator.userAgent.toLowerCase();
        return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
            (agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并没有msie的标识
        ) : false;
    }();

    //中止冒泡
    lay.stope = function(e) {
        e = e || window.event;
        e.stopPropagation ?
            e.stopPropagation() :
            e.cancelBubble = true;
    };

    //对象遍历
    lay.each = function(obj, fn) {
        var key, that = this;
        if (typeof fn !== 'function') return that;
        obj = obj || [];
        if (obj.constructor === Object) {
            for (key in obj) {
                if (fn.call(obj[key], key, obj[key])) break;
            }
        } else {
            for (key = 0; key < obj.length; key++) {
                if (fn.call(obj[key], key, obj[key])) break;
            }
        }
        return that;
    };

    //数字前置补零
    lay.digit = function(num, length, end) {
        var str = '';
        num = String(num);
        length = length || 2;
        for (var i = num.length; i < length; i++) {
            str += '0';
        }
        return num < Math.pow(10, length) ? str + (num | 0) : num;
    };

    //创建元素
    lay.elem = function(elemName, attr) {
        var elem = document.createElement(elemName);
        lay.each(attr || {}, function(key, value) {
            //源代码
            // elem.setAttribute(key, value);        
            //下面是自己改造的新代码
            if (value == "layui-laydate") {
                elem.setAttribute("class", 'combo-panel layui-laydate');
            } else {
                elem.setAttribute(key, value);
            }
        });
        return elem;
    };

    //追加字符
    LAY.addStr = function(str, new_str) {
        str = str.replace(/\s+/, ' ');
        new_str = new_str.replace(/\s+/, ' ').split(' ');
        lay.each(new_str, function(ii, item) {
            if (!new RegExp('\\b' + item + '\\b').test(str)) {
                str = str + ' ' + item;
            }
        });
        return str.replace(/^\s|\s$/, '');
    };

    //移除值
    LAY.removeStr = function(str, new_str) {
        str = str.replace(/\s+/, ' ');
        new_str = new_str.replace(/\s+/, ' ').split(' ');
        lay.each(new_str, function(ii, item) {
            var exp = new RegExp('\\b' + item + '\\b')
            if (exp.test(str)) {
                str = str.replace(exp, '');
            }
        });
        return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');
    };

    //查找子元素
    LAY.prototype.find = function(selector) {
        var that = this;
        var index = 0,
            arr = [],
            isObject = typeof selector === 'object';

        this.each(function(i, item) {
            var nativeDOM = isObject ? [selector] : item.querySelectorAll(selector || null);
            for (; index < nativeDOM.length; index++) {
                arr.push(nativeDOM[index]);
            }
            that.shift();
        });

        if (!isObject) {
            that.selector = (that.selector ? that.selector + ' ' : '') + selector
        }

        lay.each(arr, function(i, item) {
            that.push(item);
        });

        return that;
    };

    //DOM遍历
    LAY.prototype.each = function(fn) {
        return lay.each.call(this, this, fn);
    };

    //添加css类
    LAY.prototype.addClass = function(className, type) {
        return this.each(function(index, item) {
            item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className)
        });
    };

    //移除css类
    LAY.prototype.removeClass = function(className) {
        return this.addClass(className, true);
    };

    //是否包含css类
    LAY.prototype.hasClass = function(className) {
        var has = false;
        this.each(function(index, item) {
            if (new RegExp('\\b' + className + '\\b').test(item.className)) {
                has = true;
            }
        });
        return has;
    };

    //添加或获取属性
    LAY.prototype.attr = function(key, value) {
        var that = this;
        return value === undefined ? function() {
            if (that.length > 0) return that[0].getAttribute(key);
        }() : that.each(function(index, item) {
            item.setAttribute(key, value);
        });
    };

    //移除属性
    LAY.prototype.removeAttr = function(key) {
        return this.each(function(index, item) {
            item.removeAttribute(key);
        });
    };

    //设置HTML内容
    LAY.prototype.html = function(html) {
        return this.each(function(index, item) {
            item.innerHTML = html;
        });
    };

    //设置值
    LAY.prototype.val = function(value) {
        return this.each(function(index, item) {
            item.value = value;
        });
    };

    //追加内容
    LAY.prototype.append = function(elem) {
        return this.each(function(index, item) {
            typeof elem === 'object' ?
                item.appendChild(elem) :
                item.innerHTML = item.innerHTML + elem;
        });
    };

    //移除内容
    LAY.prototype.remove = function(elem) {
        return this.each(function(index, item) {
            elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
        });
    };

    //事件绑定
    LAY.prototype.on = function(eventName, fn) {
        return this.each(function(index, item) {
            item.attachEvent ? item.attachEvent('on' + eventName, function(e) {
                e.target = e.srcElement;
                fn.call(item, e);
            }) : item.addEventListener(eventName, fn, false);
        });
    };

    //解除事件
    LAY.prototype.off = function(eventName, fn) {
        return this.each(function(index, item) {
            item.detachEvent ?
                item.detachEvent('on' + eventName, fn) :
                item.removeEventListener(eventName, fn, false);
        });
    };


    /*
      组件操作
    */


    //是否闰年
    Class.isLeapYear = function(year) {
        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
    };

    //默认配置
    Class.prototype.config = {
        type: 'date' //控件类型，支持：year/month/date/time/datetime
            ,
        range: false //是否开启范围选择，即双控件
            ,
        format: 'dd-MM-yyyy' //默认日期格式(这里修改成自己需要的了，原格式为yyyy-MM-dd)
            ,
        value: null //默认日期，支持传入new Date()，或者符合format参数设定的日期格式字符
            ,
        min: '1900-1-1' //有效最小日期，年月日必须用“-”分割，时分秒必须用“:”分割。注意：它并不是遵循 format 设定的格式。
            ,
        max: '2099-12-31' //有效最大日期，同上
            ,
        trigger: 'focus' //呼出控件的事件
            ,
        show: false //是否直接显示，如果设置true，则默认直接显示控件
            ,
        showBottom: true //是否显示底部栏
            ,
        // btns: ['clear', 'now', 'confirm'] //右下角显示的按钮，会按照数组顺序排列
        btns: ['clear', 'now'] //右下角显示的按钮，会按照数组顺序排列
            ,
        lang: 'cn' //语言，只支持cn/en，即中文和英文
            ,
        theme: 'default' //主题
            ,
        position: null //控件定位方式定位, 默认absolute，支持：fixed/absolute/static
            ,
        calendar: false //是否开启公历重要节日，仅支持中文版
            ,
        mark: {} //日期备注，如重要事件或活动标记
        ,
        zIndex: null //控件层叠顺序
            ,
        done: null //控件选择完毕后的回调，点击清空/现在/确定也均会触发
            ,
        change: null //日期时间改变后的回调
    };

    //多语言
    Class.prototype.lang = function() {
        var that = this,
            options = that.config,
            text = {
                cn: {
                    weeks: ['日', '一', '二', '三', '四', '五', '六'],
                    time: ['时', '分', '秒'],
                    timeTips: '选择时间',
                    startTime: '开始时间',
                    endTime: '结束时间',
                    dateTips: '返回日期',
                    month: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
                    tools: {
                        confirm: '确定',
                        clear: '清空',
                        now: '现在'
                    }
                },
                en: {
                    weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    time: ['Hours', 'Minutes', 'Seconds'],
                    timeTips: 'Select Time',
                    startTime: 'Start Time',
                    endTime: 'End Time',
                    dateTips: 'Select Date',
                    month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    tools: {
                        confirm: 'Confirm',
                        clear: 'Clear',
                        now: 'Now'
                    }
                }
            };
        return text[options.lang] || text['cn'];
    };

    //初始准备
    Class.prototype.init = function() {
        var that = this,
            options = that.config,
            dateType = 'yyyy|y|MM|M|dd|d|HH|H|mm|m|ss|s',
            isStatic = options.position === 'static',
            format = {
                year: 'yyyy',
                month: 'yyyy-MM',
                date: 'yyyy-MM-dd',
                time: 'HH:mm:ss',
                datetime: 'yyyy-MM-dd HH:mm:ss',
            };

        options.elem = lay(options.elem);
        options.eventElem = lay(options.eventElem);

        if (!options.elem[0]) return;

        //日期范围分隔符
        if (options.range === true) options.range = '-';

        //根据不同type，初始化默认format
        if (options.format === format.date) {
            options.format = format[options.type];
        }

        //将日期格式转化成数组
        that.format = options.format.match(new RegExp(dateType + '|.', 'g')) || [];

        //生成正则表达式
        that.EXP_IF = '';
        that.EXP_SPLIT = '';
        lay.each(that.format, function(i, item) {
            var EXP = new RegExp(dateType).test(item) ?
                '\\d{' + function() {
                    if (new RegExp(dateType).test(that.format[i === 0 ? i + 1 : i - 1] || '')) {
                        if (/^yyyy|y$/.test(item)) return 4;
                        return item.length;
                    }
                    if (/^yyyy$/.test(item)) return '1,4';
                    if (/^y$/.test(item)) return '1,308';
                    return '1,2';
                }() + '}' :
                '\\' + item;
            that.EXP_IF = that.EXP_IF + EXP;
            that.EXP_SPLIT = that.EXP_SPLIT + '(' + EXP + ')';
        });
        that.EXP_IF = new RegExp('^' + (
            options.range ?
            that.EXP_IF + '\\s\\' + options.range + '\\s' + that.EXP_IF :
            that.EXP_IF
        ) + '$');
        that.EXP_SPLIT = new RegExp('^' + that.EXP_SPLIT + '$', '');

        //如果不是input|textarea元素，则默认采用click事件
        if (!that.isInput(options.elem[0])) {
            if (options.trigger === 'focus') {
                options.trigger = 'click';
            }
        }

        //设置唯一KEY
        if (!options.elem.attr('lay-key')) {
            options.elem.attr('lay-key', that.index);
            options.eventElem.attr('lay-key', that.index);
        }

        //记录重要日期
        options.mark = lay.extend({}, (options.calendar && options.lang === 'cn') ? {
            '0-1-1': '元旦',
            '0-2-14': '情人',
            '0-3-8': '妇女',
            '0-3-12': '植树',
            '0-4-1': '愚人',
            '0-5-1': '劳动',
            '0-5-4': '青年',
            '0-6-1': '儿童',
            '0-9-10': '教师',
            '0-9-18': '国耻',
            '0-10-1': '国庆',
            '0-12-25': '圣诞'
        } : {}, options.mark);

        //获取限制内日期
        lay.each(['min', 'max'], function(i, item) {
            var ymd = [],
                hms = [];
            if (typeof options[item] === 'number') { //如果为数字
                var day = options[item],
                    time = new Date().getTime(),
                    STAMP = 86400000 //代表一天的时间戳
                    ,
                    thisDate = new Date(
                        day ? (
                            day < STAMP ? time + day * STAMP : day //如果数字小于一天的时间戳，则数字为天数，否则为时间戳
                        ) : time
                    );
                ymd = [thisDate.getFullYear(), thisDate.getMonth() + 1, thisDate.getDate()];
                day < STAMP || (hms = [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds()]);
            } else {
                ymd = (options[item].match(/\d+-\d+-\d+/) || [''])[0].split('-');
                hms = (options[item].match(/\d+:\d+:\d+/) || [''])[0].split(':');
            }
            options[item] = {
                year: ymd[0] | 0 || new Date().getFullYear(),
                month: ymd[1] ? (ymd[1] | 0) - 1 : new Date().getMonth(),
                date: ymd[2] | 0 || new Date().getDate(),
                hours: hms[0] | 0,
                minutes: hms[1] | 0,
                seconds: hms[2] | 0
            };
        });

        that.elemID = 'layui-laydate' + options.elem.attr('lay-key');

        if (options.show || isStatic) that.render();
        isStatic || that.events();

        //默认赋值
        if (options.value) {
            if (options.value.constructor === Date) {
                that.setValue(that.parse(0, that.systemDate(options.value)));
            } else {
                that.setValue(options.value);
            }
        }
    };

    //控件主体渲染
    Class.prototype.render = function() {
        var that = this,
            options = that.config,
            lang = that.lang(),
            isStatic = options.position === 'static'

            //主面板
            ,
            elem = that.elem = lay.elem('div', {
                id: that.elemID,
                'class': [
                    'layui-laydate', options.range ? ' layui-laydate-range' : '', isStatic ? (' ' +
                        ELEM_STATIC) : '', options.theme && options.theme !== 'default' && !/^#/.test(
                        options.theme) ? (' laydate-theme-' + options.theme) : ''
                ].join('')
            })

            //主区域
            ,
            elemMain = that.elemMain = [],
            elemHeader = that.elemHeader = [],
            elemCont = that.elemCont = [],
            elemTable = that.table = []

            //底部区域
            ,
            divFooter = that.footer = lay.elem('div', {
                'class': ELEM_FOOTER
            });

        if (options.zIndex) elem.style.zIndex = options.zIndex;

        //单双日历区域
        lay.each(new Array(2), function(i) {
            if (!options.range && i > 0) {
                return true;
            }

            //头部区域
            var divHeader = lay.elem('div', {
                    'class': 'layui-laydate-header'
                })

                //左右切换
                ,
                headerChild = [function() { //上一年
                    var elem = lay.elem('i', {
                        'class': 'layui-icon laydate-icon laydate-prev-y'
                    });
                    elem.innerHTML = '&#xe65a;';
                    return elem;
                }(), function() { //上一月
                    var elem = lay.elem('i', {
                        'class': 'layui-icon laydate-icon laydate-prev-m'
                    });
                    elem.innerHTML = '&#xe603;';
                    return elem;
                }(), function() { //年月选择
                    var elem = lay.elem('div', {
                            'class': 'laydate-set-ym'
                        }),
                        spanY = lay.elem('span'),
                        spanM = lay.elem('span');
                    elem.appendChild(spanY);
                    elem.appendChild(spanM);
                    return elem;
                }(), function() { //下一月
                    var elem = lay.elem('i', {
                        'class': 'layui-icon laydate-icon laydate-next-m'
                    });
                    elem.innerHTML = '&#xe602;';
                    return elem;
                }(), function() { //下一年
                    var elem = lay.elem('i', {
                        'class': 'layui-icon laydate-icon laydate-next-y'
                    });
                    elem.innerHTML = '&#xe65b;';
                    return elem;
                }()]

                //日历内容区域
                ,
                divContent = lay.elem('div', {
                    'class': 'layui-laydate-content'
                }),
                table = lay.elem('table'),
                thead = lay.elem('thead'),
                theadTr = lay.elem('tr');

            //生成年月选择
            lay.each(headerChild, function(i, item) {
                divHeader.appendChild(item);
            });

            //生成表格
            thead.appendChild(theadTr);
            lay.each(new Array(6), function(i) { //表体
                var tr = table.insertRow(0);
                lay.each(new Array(7), function(j) {
                    if (i === 0) {
                        var th = lay.elem('th');
                        th.innerHTML = lang.weeks[j];
                        theadTr.appendChild(th);
                    }
                    tr.insertCell(j);
                });
            });
            table.insertBefore(thead, table.children[0]); //表头
            divContent.appendChild(table);

            elemMain[i] = lay.elem('div', {
                'class': 'layui-laydate-main laydate-main-list-' + i
            });

            elemMain[i].appendChild(divHeader);
            elemMain[i].appendChild(divContent);

            elemHeader.push(headerChild);
            elemCont.push(divContent);
            elemTable.push(table);
        });

        //生成底部栏
        lay(divFooter).html(function() {
            var html = [],
                btns = [];
            if (options.type === 'datetime') {
                html.push('<span lay-type="datetime" class="laydate-btns-time">' + lang.timeTips +
                    '</span>');
            }
            lay.each(options.btns, function(i, item) {
                var title = lang.tools[item] || 'btn';
                if (options.range && item === 'now') return;
                if (isStatic && item === 'clear') title = options.lang === 'cn' ? '重置' : 'Reset';
                btns.push('<span lay-type="' + item + '" class="laydate-btns-' + item + '">' +
                    title + '</span>');
            });
            html.push('<div class="laydate-footer-btns">' + btns.join('') + '</div>');
            return html.join('');
        }());

        //插入到主区域
        lay.each(elemMain, function(i, main) {
            elem.appendChild(main);
        });
        options.showBottom && elem.appendChild(divFooter);

        //生成自定义主题
        if (/^#/.test(options.theme)) {
            var style = lay.elem('style'),
                styleText = [
                    '#{{id}} .layui-laydate-header{background-color:{{theme}};}',
                    '#{{id}} .layui-this{background-color:{{theme}} !important;}'
                ].join('').replace(/{{id}}/g, that.elemID).replace(/{{theme}}/g, options.theme);

            if ('styleSheet' in style) {
                style.setAttribute('type', 'text/css');
                style.styleSheet.cssText = styleText;
            } else {
                style.innerHTML = styleText;
            }

            lay(elem).addClass('laydate-theme-molv');
            elem.appendChild(style);
        }

        //移除上一个控件
        that.remove(Class.thisElemDate);

        //如果是静态定位，则插入到指定的容器中，否则，插入到body
        isStatic ? options.elem.append(elem) : (
            document.body.appendChild(elem), that.position() //定位
        );

        that.checkDate().calendar(); //初始校验
        that.changeEvent(); //日期切换

        Class.thisElemDate = that.elemID;

        typeof options.ready === 'function' && options.ready(lay.extend({}, options.dateTime, {
            month: options.dateTime.month + 1
        }));
    };

    //控件移除
    Class.prototype.remove = function(prev) {
        var that = this,
            options = that.config,
            elem = lay('#' + (prev || that.elemID));
        if (!elem.hasClass(ELEM_STATIC)) {
            that.checkDate(function() {
                elem.remove();
            });
        }
        return that;
    };

    //定位算法
    Class.prototype.position = function() {
        var that = this,
            options = that.config,
            elem = that.bindElem || options.elem[0],
            rect = elem.getBoundingClientRect() //绑定元素的坐标
            ,
            elemWidth = that.elem.offsetWidth //控件的宽度
            ,
            elemHeight = that.elem.offsetHeight //控件的高度

            //滚动条高度
            ,
            scrollArea = function(type) {
                type = type ? 'scrollLeft' : 'scrollTop';
                return document.body[type] | document.documentElement[type];
            },
            winArea = function(type) {
                return document.documentElement[type ? 'clientWidth' : 'clientHeight']
            },
            margin = 5,
            left = rect.left,
            top = rect.bottom;

        //如果右侧超出边界
        if (left + elemWidth + margin > winArea('width')) {
            left = winArea('width') - elemWidth - margin;
        }

        //如果底部超出边界
        if (top + elemHeight + margin > winArea()) {
            top = rect.top > elemHeight //顶部是否有足够区域显示完全
                ?
                rect.top - elemHeight :
                winArea() - elemHeight;
            top = top - margin * 2;
        }

        if (options.position) {
            that.elem.style.position = options.position;
        }
        that.elem.style.left = left + (options.position === 'fixed' ? 0 : scrollArea(1)) + 'px';
        that.elem.style.top = top + (options.position === 'fixed' ? 0 : scrollArea()) + 'px';
    };

    //提示
    Class.prototype.hint = function(content) {
        var that = this,
            options = that.config,
            div = lay.elem('div', {
                'class': ELEM_HINT
            });

        div.innerHTML = content || '';
        lay(that.elem).find('.' + ELEM_HINT).remove();
        that.elem.appendChild(div);

        clearTimeout(that.hinTimer);
        that.hinTimer = setTimeout(function() {
            lay(that.elem).find('.' + ELEM_HINT).remove();
        }, 3000);
    };

    //获取递增/减后的年月
    Class.prototype.getAsYM = function(Y, M, type) {
        type ? M-- : M++;
        if (M < 0) {
            M = 11;
            Y--;
        }
        if (M > 11) {
            M = 0;
            Y++;
        }
        return [Y, M];
    };

    //系统消息
    Class.prototype.systemDate = function(newDate) {
        var thisDate = newDate || new Date();
        return {
            year: thisDate.getFullYear() //年
                ,
            month: thisDate.getMonth() //月
                ,
            date: thisDate.getDate() //日
                ,
            hours: newDate ? newDate.getHours() : 0 //时
                ,
            minutes: newDate ? newDate.getMinutes() : 0 //分
                ,
            seconds: newDate ? newDate.getSeconds() : 0 //秒
        }
    };

    //日期校验
    Class.prototype.checkDate = function(fn) {
        var that = this,
            thisDate = new Date(),
            options = that.config,
            dateTime = options.dateTime = options.dateTime || that.systemDate(),
            thisMaxDate, error

            , elem = that.bindElem || options.elem[0],
            valType = that.isInput(elem) ? 'val' : 'html',
            value = that.isInput(elem) ? elem.value : (options.position === 'static' ? '' : elem.innerHTML)

            //校验日期有效数字
            ,
            checkValid = function(dateTime) {
                if (dateTime.year > LIMIT_YEAR[1]) dateTime.year = LIMIT_YEAR[1], error = true; //不能超过20万年
                if (dateTime.month > 11) dateTime.month = 11, error = true;
                if (dateTime.hours > 23) dateTime.hours = 0, error = true;
                if (dateTime.minutes > 59) dateTime.minutes = 0, dateTime.hours++, error = true;
                if (dateTime.seconds > 59) dateTime.seconds = 0, dateTime.minutes++, error = true;

                //计算当前月的最后一天
                thisMaxDate = laydate.getEndDate(dateTime.month + 1, dateTime.year);
                if (dateTime.date > thisMaxDate) dateTime.date = thisMaxDate, error = true;
            }

            //获得初始化日期值
            ,
            initDate = function(dateTime, value, index) {
                var startEnd = ['startTime', 'endTime'];
                value = (value.match(that.EXP_SPLIT) || []).slice(1);
                index = index || 0;
                if (options.range) {
                    that[startEnd[index]] = that[startEnd[index]] || {};
                }
                lay.each(that.format, function(i, item) {
                    var thisv = parseFloat(value[i]);
                    if (value[i].length < item.length) error = true;
                    if (/yyyy|y/.test(item)) { //年
                        if (thisv < LIMIT_YEAR[0]) thisv = LIMIT_YEAR[0], error = true; //年不能低于100年
                        dateTime.year = thisv;
                    } else if (/MM|M/.test(item)) { //月
                        if (thisv < 1) thisv = 1, error = true;
                        dateTime.month = thisv - 1;
                    } else if (/dd|d/.test(item)) { //日
                        if (thisv < 1) thisv = 1, error = true;
                        dateTime.date = thisv;
                    } else if (/HH|H/.test(item)) { //时
                        if (thisv < 1) thisv = 0, error = true;
                        dateTime.hours = thisv;
                        options.range && (that[startEnd[index]].hours = thisv);
                    } else if (/mm|m/.test(item)) { //分
                        if (thisv < 1) thisv = 0, error = true;
                        dateTime.minutes = thisv;
                        options.range && (that[startEnd[index]].minutes = thisv);
                    } else if (/ss|s/.test(item)) { //秒
                        if (thisv < 1) thisv = 0, error = true;
                        dateTime.seconds = thisv;
                        options.range && (that[startEnd[index]].seconds = thisv);
                    }
                });
                checkValid(dateTime)
            };
        if (fn === 'limit') return checkValid(dateTime), that;

        value = value || options.value;
        if (typeof value === 'string') {
            value = value.replace(/\s+/g, ' ').replace(/^\s|\s$/g, '');
        }

        //如果点击了开始，单未选择结束就关闭，则重新选择开始
        if (that.startState && !that.endState) {
            delete that.startState;
            that.endState = true;
        };
        if (typeof value === 'string' && value) {
            
            // 下面是ypf修改的代码---开始
            var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
                'Dec'
            ];
            var myMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
            //格式处理-单双选择
            for (var i = 0; i < month.length; i++) {
                var regObj1 = new RegExp(month[i], "g");
                value = value.replace(regObj1, myMonth[i]);
            }
            // 上面是ypf修改的代码---结束
            
            if (that.EXP_IF.test(value)) { //校验日期格式
                if (options.range) {
                    value = value.split(' ' + options.range + ' ');
                    that.startDate = that.startDate || that.systemDate();
                    that.endDate = that.endDate || that.systemDate();
                    options.dateTime = lay.extend({}, that.startDate);
                    lay.each([that.startDate, that.endDate], function(i, item) {
                        initDate(item, value[i], i);
                    });
                } else {
                    initDate(dateTime, value)
                }
            } else {         
                //ypf注释掉了 格式不合法的提示，和错误标记，便于自定义格式处理
                // that.hint('日期格式不合法<br>必须遵循下述格式：<br>'+ (
                //   options.range ? (options.format + ' '+ options.range +' ' + options.format) : options.format
                // ) + '<br>已为你重置');
                // error = true;
                        
                //单选处理            
                //下面将日期改造成正常格式 xxxx-xx 或 xxxx-xx-xx，使其赋值后打开，能选中原值
                // if (value.indexOf(",") != -1) {
                //     value = value.replace(new RegExp(",", "g"), "-");
                //     initDate(dateTime, value);
                // }
                        
                initDate(dateTime, value);

            }
        } else if (value && value.constructor === Date) { //如果值为日期对象时
            options.dateTime = that.systemDate(value);
        } else {
            options.dateTime = that.systemDate();
            delete that.startState;
            delete that.endState;
            delete that.startDate;
            delete that.endDate;
            delete that.startTime;
            delete that.endTime;
        }

        checkValid(dateTime);
        if (error && value) {
            that.setValue(
                options.range ? (that.endDate ? that.parse() : '') : that.parse()
            );
        }
        fn && fn();
        return that;
    };

    //公历重要日期与自定义备注
    Class.prototype.mark = function(td, YMD) {
        var that = this,
            mark, options = that.config;
        lay.each(options.mark, function(key, title) {
            var keys = key.split('-');
            if ((keys[0] == YMD[0] || keys[0] == 0) //每年的每月
                &&
                (keys[1] == YMD[1] || keys[1] == 0) //每月的每日
                &&
                keys[2] == YMD[2]) { //特定日
                mark = title || YMD[2];
            }
        });
        mark && td.html('<span class="laydate-day-mark">' + mark + '</span>');

        return that;
    };

    //无效日期范围的标记
    Class.prototype.limit = function(elem, date, index, time) {
        var that = this,
            options = that.config,
            timestrap = {},
            dateTime = options[index > 41 ? 'endDate' : 'dateTime'],
            isOut, thisDateTime = lay.extend({}, dateTime, date || {});
        lay.each({
            now: thisDateTime,
            min: options.min,
            max: options.max
        }, function(key, item) {
            timestrap[key] = that.newDate(lay.extend({
                year: item.year,
                month: item.month,
                date: item.date
            }, function() {
                var hms = {};
                lay.each(time, function(i, keys) {
                    hms[keys] = item[keys];
                });
                return hms;
            }())).getTime(); //time：是否比较时分秒
        });

        isOut = timestrap.now < timestrap.min || timestrap.now > timestrap.max;
        elem && elem[isOut ? 'addClass' : 'removeClass'](DISABLED);
        return isOut;
    };

    //日历表
    Class.prototype.calendar = function(value) {
        var that = this,
            options = that.config,
            dateTime = value || options.dateTime,
            thisDate = new Date(),
            startWeek, prevMaxDate, thisMaxDate, lang = that.lang()

            ,
            isAlone = options.type !== 'date' && options.type !== 'datetime',
            index = value ? 1 : 0,
            tds = lay(that.table[index]).find('td'),
            elemYM = lay(that.elemHeader[index][2]).find('span');

        if (dateTime.year < LIMIT_YEAR[0]) dateTime.year = LIMIT_YEAR[0], that.hint('最低只能支持到公元' + LIMIT_YEAR[0] +
            '年');
        if (dateTime.year > LIMIT_YEAR[1]) dateTime.year = LIMIT_YEAR[1], that.hint('最高只能支持到公元' + LIMIT_YEAR[1] +
            '年');

        //记录初始值
        if (!that.firstDate) {
            that.firstDate = lay.extend({}, dateTime);
        }

        //计算当前月第一天的星期
        thisDate.setFullYear(dateTime.year, dateTime.month, 1);
        startWeek = thisDate.getDay();

        prevMaxDate = laydate.getEndDate(dateTime.month || 12, dateTime.year); //计算上个月的最后一天
        thisMaxDate = laydate.getEndDate(dateTime.month + 1, dateTime.year); //计算当前月的最后一天

        //赋值日
        lay.each(tds, function(index, item) {
            var YMD = [dateTime.year, dateTime.month],
                st = 0;
            item = lay(item);
            item.removeAttr('class');
            if (index < startWeek) {
                st = prevMaxDate - startWeek + index;
                item.addClass('laydate-day-prev');
                YMD = that.getAsYM(dateTime.year, dateTime.month, 'sub');
            } else if (index >= startWeek && index < thisMaxDate + startWeek) {
                st = index - startWeek;
                if (!options.range) {
                    st + 1 === dateTime.date && item.addClass(THIS);
                }
            } else {
                st = index - thisMaxDate - startWeek;
                item.addClass('laydate-day-next');
                YMD = that.getAsYM(dateTime.year, dateTime.month);
            }
            YMD[1]++;
            YMD[2] = st + 1;
            item.attr('lay-ymd', YMD.join('-')).html(YMD[2]);
            that.mark(item, YMD).limit(item, {
                year: YMD[0],
                month: YMD[1] - 1,
                date: YMD[2]
            }, index);
        });

        //同步头部年月
        lay(elemYM[0]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1));
        lay(elemYM[1]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1));

        if (options.lang === 'cn') {
            lay(elemYM[0]).attr('lay-type', 'year').html(dateTime.year + '年')
            lay(elemYM[1]).attr('lay-type', 'month').html((dateTime.month + 1) + '月');
        } else {
            lay(elemYM[0]).attr('lay-type', 'month').html(lang.month[dateTime.month]);
            lay(elemYM[1]).attr('lay-type', 'year').html(dateTime.year);
        }

        //初始默认选择器
        if (isAlone) {
            if (options.range) {
                value ? that.endDate = (that.endDate || {
                    year: dateTime.year + (options.type === 'year' ? 1 : 0),
                    month: dateTime.month + (options.type === 'month' ? 0 : -1)
                }) : (that.startDate = that.startDate || {
                    year: dateTime.year,
                    month: dateTime.month
                });
                if (value) {
                    that.listYM = [
                        [that.startDate.year, that.startDate.month + 1],
                        [that.endDate.year, that.endDate.month + 1]
                    ];
                    that.list(options.type, 0).list(options.type, 1);
                    //同步按钮可点状态
                    options.type === 'time' ? that.setBtnStatus('时间', lay.extend({}, that.systemDate(), that
                        .startTime), lay.extend({}, that.systemDate(), that.endTime)) : that.setBtnStatus(true);
                }
            }
            if (!options.range) {
                that.listYM = [
                    [dateTime.year, dateTime.month + 1]
                ];
                that.list(options.type, 0);
            }
        }

        //赋值双日历
        if (options.range && !value) {
            var EYM = that.getAsYM(dateTime.year, dateTime.month)
            that.calendar(lay.extend({}, dateTime, {
                year: EYM[0],
                month: EYM[1]
            }));
        }

        //通过检测当前有效日期，来设定确定按钮是否可点
        if (!options.range) that.limit(lay(that.footer).find(ELEM_CONFIRM), null, 0, ['hours', 'minutes',
            'seconds'
        ]);

        //标记选择范围
        if (options.range && value && !isAlone) that.stampRange();
        return that;
    };

    //生成年月时分秒列表
    Class.prototype.list = function(type, index) {
        var that = this,
            options = that.config,
            dateTime = options.dateTime,
            lang = that.lang(),
            isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器

            ,
            ul = lay.elem('ul', {
                'class': ELEM_LIST + ' ' + ({
                    year: 'laydate-year-list',
                    month: 'laydate-month-list',
                    time: 'laydate-time-list'
                })[type]
            }),
            elemHeader = that.elemHeader[index],
            elemYM = lay(elemHeader[2]).find('span'),
            elemCont = that.elemCont[index || 0],
            haveList = lay(elemCont).find('.' + ELEM_LIST)[0],
            isCN = options.lang === 'cn',
            text = isCN ? '年' : ''

            ,
            listYM = that.listYM[index] || {},
            hms = ['hours', 'minutes', 'seconds'],
            startEnd = ['startTime', 'endTime'][index];

        if (listYM[0] < 1) listYM[0] = 1;

        if (type === 'year') { //年列表
            var yearNum, startY = yearNum = listYM[0] - 7;
            if (startY < 1) startY = yearNum = 1;
            lay.each(new Array(15), function(i) {
                var li = lay.elem('li', {
                        'lay-ym': yearNum
                    }),
                    ymd = {
                        year: yearNum
                    };
                yearNum == listYM[0] && lay(li).addClass(THIS);
                li.innerHTML = yearNum + text;
                ul.appendChild(li);
                if (yearNum < that.firstDate.year) {
                    ymd.month = options.min.month;
                    ymd.date = options.min.date;
                } else if (yearNum >= that.firstDate.year) {
                    ymd.month = options.max.month;
                    ymd.date = options.max.date;
                }
                that.limit(lay(li), ymd, index);
                yearNum++;
            });
            lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', (yearNum - 8) + '-' + listYM[1])
                .html((startY + text) + ' - ' + (yearNum - 1 + text));
        } else if (type === 'month') { //月列表
            lay.each(new Array(12), function(i) {
                var li = lay.elem('li', {
                        'lay-ym': i
                    }),
                    ymd = {
                        year: listYM[0],
                        month: i
                    };
                i + 1 == listYM[1] && lay(li).addClass(THIS);
                li.innerHTML = lang.month[i] + (isCN ? '月' : '');
                ul.appendChild(li);
                if (listYM[0] < that.firstDate.year) {
                    ymd.date = options.min.date;
                } else if (listYM[0] >= that.firstDate.year) {
                    ymd.date = options.max.date;
                }
                that.limit(lay(li), ymd, index);
            });
            lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1])
                .html(listYM[0] + text);
        } else if (type === 'time') { //时间列表
            //检测时分秒状态是否在有效日期时间范围内
            var setTimeStatus = function() {
                lay(ul).find('ol').each(function(i, ol) {
                    lay(ol).find('li').each(function(ii, li) {
                        that.limit(lay(li), [{
                            hours: ii
                        }, {
                            hours: that[startEnd].hours,
                            minutes: ii
                        }, {
                            hours: that[startEnd].hours,
                            minutes: that[startEnd].minutes,
                            seconds: ii
                        }][i], index, [
                            ['hours'],
                            ['hours', 'minutes'],
                            ['hours', 'minutes', 'seconds']
                        ][i]);
                    });
                });
                if (!options.range) that.limit(lay(that.footer).find(ELEM_CONFIRM), that[startEnd], 0, ['hours',
                    'minutes', 'seconds'
                ]);
            };
            if (options.range) {
                if (!that[startEnd]) that[startEnd] = {
                    hours: 0,
                    minutes: 0,
                    seconds: 0
                };
            } else {
                that[startEnd] = dateTime;
            }
            lay.each([24, 60, 60], function(i, item) {
                var li = lay.elem('li'),
                    childUL = ['<p>' + lang.time[i] + '</p><ol>'];
                lay.each(new Array(item), function(ii) {
                    childUL.push('<li' + (that[startEnd][hms[i]] === ii ? ' class="' + THIS + '"' :
                        '') + '>' + lay.digit(ii, 2) + '</li>');
                });
                li.innerHTML = childUL.join('') + '</ol>';
                ul.appendChild(li);
            });
            setTimeStatus();
        }

        //插入容器
        if (haveList) elemCont.removeChild(haveList);
        elemCont.appendChild(ul);

        //年月
        if (type === 'year' || type === 'month') {
            //显示切换箭头
            lay(that.elemMain[index]).addClass('laydate-ym-show');

            //选中
            lay(ul).find('li').on('click', function() {
                var ym = lay(this).attr('lay-ym') | 0;
                if (lay(this).hasClass(DISABLED)) return;

                if (index === 0) {
                    dateTime[type] = ym;
                    if (isAlone) that.startDate[type] = ym;
                    that.limit(lay(that.footer).find(ELEM_CONFIRM), null, 0);
                } else { //范围选择
                    if (isAlone) { //非date/datetime类型
                        that.endDate[type] = ym;
                    } else { //date/datetime类型
                        var YM = type === 'year' ?
                            that.getAsYM(ym, listYM[1] - 1, 'sub') :
                            that.getAsYM(listYM[0], ym, 'sub');
                        lay.extend(dateTime, {
                            year: YM[0],
                            month: YM[1]
                        });
                    }
                }

                if (options.type === 'year' || options.type === 'month') {
                    lay(ul).find('.' + THIS).removeClass(THIS);
                    lay(this).addClass(THIS);

                    //如果为年月选择器，点击了年列表，则切换到月选择器
                    if (options.type === 'month' && type === 'year') {
                        that.listYM[index][0] = ym;
                        isAlone && (that[['startDate', 'endDate'][index]].year = ym);
                        that.list('month', index);
                    }
                } else {
                    that.checkDate('limit').calendar();
                    that.closeList();
                }

                that.setBtnStatus(); //同步按钮可点状态
                options.range || that.done(null, 'change');
                lay(that.footer).find(ELEM_TIME_BTN).removeClass(DISABLED);
            });
        } else {
            var span = lay.elem('span', {
                    'class': ELEM_TIME_TEXT
                }),
                scroll = function() { //滚动条定位
                    lay(ul).find('ol').each(function(i) {
                        var ol = this,
                            li = lay(ol).find('li')
                        ol.scrollTop = 30 * (that[startEnd][hms[i]] - 2);
                        if (ol.scrollTop <= 0) {
                            li.each(function(ii, item) {
                                if (!lay(this).hasClass(DISABLED)) {
                                    ol.scrollTop = 30 * (ii - 2);
                                    return true;
                                }
                            });
                        }
                    });
                },
                haveSpan = lay(elemHeader[2]).find('.' + ELEM_TIME_TEXT);
            scroll()
            span.innerHTML = options.range ? [lang.startTime, lang.endTime][index] : lang.timeTips
            lay(that.elemMain[index]).addClass('laydate-time-show');
            if (haveSpan[0]) haveSpan.remove();
            elemHeader[2].appendChild(span);

            lay(ul).find('ol').each(function(i) {
                var ol = this;
                //选择时分秒
                lay(ol).find('li').on('click', function() {
                    var value = this.innerHTML | 0;
                    if (lay(this).hasClass(DISABLED)) return;
                    if (options.range) {
                        that[startEnd][hms[i]] = value;
                    } else {
                        dateTime[hms[i]] = value;
                    }
                    lay(ol).find('.' + THIS).removeClass(THIS);
                    lay(this).addClass(THIS);

                    setTimeStatus();
                    scroll();
                    (that.endDate || options.type === 'time') && that.done(null, 'change');

                    //同步按钮可点状态
                    that.setBtnStatus();
                });
            });
        }

        return that;
    };

    //记录列表切换后的年月
    Class.prototype.listYM = [];

    //关闭列表
    Class.prototype.closeList = function() {
        var that = this,
            options = that.config;

        lay.each(that.elemCont, function(index, item) {
            lay(this).find('.' + ELEM_LIST).remove();
            lay(that.elemMain[index]).removeClass('laydate-ym-show laydate-time-show');
        });
        lay(that.elem).find('.' + ELEM_TIME_TEXT).remove();
    };

    //检测结束日期是否超出开始日期
    Class.prototype.setBtnStatus = function(tips, start, end) {
        var that = this,
            options = that.config,
            isOut, elemBtn = lay(that.footer).find(ELEM_CONFIRM),
            isAlone = options.range && options.type !== 'date' && options.type !== 'time';
        if (isAlone) {
            start = start || that.startDate;
            end = end || that.endDate;
            isOut = that.newDate(start).getTime() > that.newDate(end).getTime();

            //如果不在有效日期内，直接禁用按钮，否则比较开始和结束日期
            (that.limit(null, start) || that.limit(null, end)) ?
            elemBtn.addClass(DISABLED): elemBtn[isOut ? 'addClass' : 'removeClass'](DISABLED);

            //是否异常提示
            if (tips && isOut) that.hint(
                typeof tips === 'string' ? TIPS_OUT.replace(/日期/g, tips) : TIPS_OUT
            );
        }
    };

    //转义为规定格式的日期字符
    Class.prototype.parse = function(state, date) {
        var that = this,
            options = that.config,
            dateTime = date || (state ?
                lay.extend({}, that.endDate, that.endTime) :
                (options.range ? lay.extend({}, that.startDate, that.startTime) : options.dateTime)),
            format = that.format.concat();
            
        //转义为规定格式
        function newformatM(m) {
            try {
                var enMonthList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                    'Nov', 'Dec'
                ];
                var index = parseInt(m) - 1;
                return `${enMonthList[index]}`;
            } catch (e) {
                return `格式错误`;
            }

        }
        lay.each(format, function(i, item) {
            if (/yyyy|y/.test(item)) { //年
                format[i] = lay.digit(dateTime.year, item.length);
            } else if (/MM|M/.test(item)) { //月
                // 源代码
                //format[i] = lay.digit(dateTime.month + 1, item.length);
                
                //下面是改写源码，重写格式化-单双选择
                if (options.lang == 'en' && options.range) {
                    format[i] = newformatM(dateTime.month + 1);
                } else {
                    format[i] = lay.digit(dateTime.month + 1, item.length);
                }

            } else if (/dd|d/.test(item)) { //日
                format[i] = lay.digit(dateTime.date, item.length);
            } else if (/HH|H/.test(item)) { //时
                format[i] = lay.digit(dateTime.hours, item.length);
            } else if (/mm|m/.test(item)) { //分
                format[i] = lay.digit(dateTime.minutes, item.length);
            } else if (/ss|s/.test(item)) { //秒
                format[i] = lay.digit(dateTime.seconds, item.length);
            }
        });

        //返回日期范围字符
        if (options.range && !state) {
            return format.join('') + ' ' + options.range + ' ' + that.parse(1);
        }

        return format.join('');
    };

    //创建指定日期时间对象
    Class.prototype.newDate = function(dateTime) {
        dateTime = dateTime || {};
        return new Date(
            dateTime.year || 1, dateTime.month || 0, dateTime.date || 1, dateTime.hours || 0, dateTime
            .minutes || 0, dateTime.seconds || 0
        );
    };

    //赋值
    Class.prototype.setValue = function(value) {
        var that = this,
            options = that.config,
            elem = that.bindElem || options.elem[0],
            valType = that.isInput(elem) ? 'val' : 'html'

        options.position === 'static' || lay(elem)[valType](value || '');
        return this;
    };

    //标记范围内的日期
    Class.prototype.stampRange = function() {
        var that = this,
            options = that.config,
            startTime, endTime, tds = lay(that.elem).find('td');
        if (options.range && !that.endDate) lay(that.footer).find(ELEM_CONFIRM).addClass(DISABLED);
        if (!that.endDate) return;
        startTime = that.newDate({
            year: that.startDate.year,
            month: that.startDate.month,
            date: that.startDate.date
        }).getTime();

        endTime = that.newDate({
            year: that.endDate.year,
            month: that.endDate.month,
            date: that.endDate.date
        }).getTime();

        if (startTime > endTime) return that.hint(TIPS_OUT);

        lay.each(tds, function(i, item) {
            var ymd = lay(item).attr('lay-ymd').split('-'),
                thisTime = that.newDate({
                    year: ymd[0],
                    month: ymd[1] - 1,
                    date: ymd[2]
                }).getTime();
            lay(item).removeClass(ELEM_SELECTED + ' ' + THIS);
            if (thisTime === startTime || thisTime === endTime) {
                lay(item).addClass(
                    lay(item).hasClass(ELEM_PREV) || lay(item).hasClass(ELEM_NEXT) ?
                    ELEM_SELECTED :
                    THIS
                );
            }
            if (thisTime > startTime && thisTime < endTime) {
                lay(item).addClass(ELEM_SELECTED);
            }
        });
    };

    //执行done/change回调
    Class.prototype.done = function(param, type) {
        var that = this,
            options = that.config,
            start = lay.extend({}, that.startDate ? lay.extend(that.startDate, that.startTime) : options.dateTime),
            end = lay.extend({}, lay.extend(that.endDate, that.endTime))

        lay.each([start, end], function(i, item) {
            if (!('month' in item)) return;
            lay.extend(item, {
                month: item.month + 1
            });
        });

        param = param || [that.parse(), start, end];
        typeof options[type || 'done'] === 'function' && options[type || 'done'].apply(options, param);

        return that;
    };

    //选择日期
    Class.prototype.choose = function(td) {
        var that = this,
            options = that.config,
            dateTime = options.dateTime

            ,
            tds = lay(that.elem).find('td'),
            YMD = td.attr('lay-ymd').split('-')

            ,
            setDateTime = function(one) {
                var thisDate = new Date();

                //同步dateTime
                one && lay.extend(dateTime, YMD);

                //记录开始日期
                if (options.range) {
                    that.startDate ? lay.extend(that.startDate, YMD) : (
                        that.startDate = lay.extend({}, YMD, that.startTime)
                    );
                    that.startYMD = YMD;
                }
            };

        YMD = {
            year: YMD[0] | 0,
            month: (YMD[1] | 0) - 1,
            date: YMD[2] | 0
        };

        if (td.hasClass(DISABLED)) return;

        //范围选择
        if (options.range) {

            lay.each(['startTime', 'endTime'], function(i, item) {
                that[item] = that[item] || {
                    hours: 0,
                    minutes: 0,
                    seconds: 0
                };
            });

            if (that.endState) { //重新选择
                setDateTime();
                delete that.endState;
                delete that.endDate;
                that.startState = true;
                tds.removeClass(THIS + ' ' + ELEM_SELECTED);
                td.addClass(THIS);
            } else if (that.startState) { //选中截止
                td.addClass(THIS);

                that.endDate ? lay.extend(that.endDate, YMD) : (
                    that.endDate = lay.extend({}, YMD, that.endTime)
                );

                //判断是否顺时或逆时选择
                if (that.newDate(YMD).getTime() < that.newDate(that.startYMD).getTime()) {
                    var startDate = lay.extend({}, that.endDate, {
                        hours: that.startDate.hours,
                        minutes: that.startDate.minutes,
                        seconds: that.startDate.seconds
                    });
                    lay.extend(that.endDate, that.startDate, {
                        hours: that.endDate.hours,
                        minutes: that.endDate.minutes,
                        seconds: that.endDate.seconds
                    });
                    that.startDate = startDate;
                }

                options.showBottom || that.done();
                that.stampRange(); //标记范围内的日期
                that.endState = true;
                that.done(null, 'change');
            } else { //选中开始
                td.addClass(THIS);
                setDateTime();
                that.startState = true;
            }
            lay(that.footer).find(ELEM_CONFIRM)[that.endDate ? 'removeClass' : 'addClass'](DISABLED);
        } else if (options.position === 'static') { //直接嵌套的选中
            setDateTime(true);
            that.calendar().done().done(null, 'change');
        } else if (options.type === 'date') {
            setDateTime(true);
            that.setValue(that.parse()).remove().done();
        } else if (options.type === 'datetime') {
            setDateTime(true);
            that.calendar().done(null, 'change');
        }
    };

    //底部按钮
    Class.prototype.tool = function(btn, type) {
        var that = this,
            options = that.config,
            dateTime = options.dateTime,
            isStatic = options.position === 'static',
            active = {
                //选择时间
                datetime: function() {
                        if (lay(btn).hasClass(DISABLED)) return;
                        that.list('time', 0);
                        options.range && that.list('time', 1);
                        lay(btn).attr('lay-type', 'date').html(that.lang().dateTips);
                    }

                    //选择日期
                    ,
                date: function() {
                        that.closeList();
                        lay(btn).attr('lay-type', 'datetime').html(that.lang().timeTips);
                    }

                    //清空、重置
                    ,
                clear: function() {
                        that.setValue('').remove();
                        isStatic && (
                            lay.extend(dateTime, that.firstDate), that.calendar()
                        )
                        options.range && (
                            delete that.startState, delete that.endState, delete that.endDate, delete that
                            .startTime, delete that.endTime
                        );
                        that.done(['', {}, {}]);
                    }

                    //现在
                    ,
                now: function() {
                        var thisDate = new Date();
                        lay.extend(dateTime, that.systemDate(), {
                            hours: thisDate.getHours(),
                            minutes: thisDate.getMinutes(),
                            seconds: thisDate.getSeconds()
                        });
                        that.setValue(that.parse()).remove();
                        isStatic && that.calendar();
                        that.done();
                    }

                    //确定
                    ,
                confirm: function() {
                    if (options.range) {
                        if (!that.endDate) return that.hint('请先选择日期范围');
                        if (lay(btn).hasClass(DISABLED)) return that.hint(
                            options.type === 'time' ? TIPS_OUT.replace(/日期/g, '时间') : TIPS_OUT
                        );
                    } else {
                        if (lay(btn).hasClass(DISABLED)) return that.hint('不在有效日期或时间范围内');
                    }
                    that.done();
                    that.setValue(that.parse()).remove()
                }
            };
        active[type] && active[type]();
    };

    //统一切换处理
    Class.prototype.change = function(index) {
        var that = this,
            options = that.config,
            dateTime = options.dateTime,
            isAlone = options.range && (options.type === 'year' || options.type === 'month')

            ,
            elemCont = that.elemCont[index || 0],
            listYM = that.listYM[index],
            addSubYeay = function(type) {
                var startEnd = ['startDate', 'endDate'][index],
                    isYear = lay(elemCont).find('.laydate-year-list')[0],
                    isMonth = lay(elemCont).find('.laydate-month-list')[0];

                //切换年列表
                if (isYear) {
                    listYM[0] = type ? listYM[0] - 15 : listYM[0] + 15;
                    that.list('year', index);
                }

                if (isMonth) { //切换月面板中的年
                    type ? listYM[0]-- : listYM[0]++;
                    that.list('month', index);
                }

                if (isYear || isMonth) {
                    lay.extend(dateTime, {
                        year: listYM[0]
                    });
                    if (isAlone) that[startEnd].year = listYM[0];
                    options.range || that.done(null, 'change');
                    that.setBtnStatus();
                    options.range || that.limit(lay(that.footer).find(ELEM_CONFIRM), {
                        year: listYM[0]
                    });
                }
                return isYear || isMonth;
            };

        return {
            prevYear: function() {
                if (addSubYeay('sub')) return;
                dateTime.year--;
                that.checkDate('limit').calendar();
                options.range || that.done(null, 'change');
            },
            prevMonth: function() {
                var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub');
                lay.extend(dateTime, {
                    year: YM[0],
                    month: YM[1]
                });
                that.checkDate('limit').calendar();
                options.range || that.done(null, 'change');
            },
            nextMonth: function() {
                var YM = that.getAsYM(dateTime.year, dateTime.month);
                lay.extend(dateTime, {
                    year: YM[0],
                    month: YM[1]
                });
                that.checkDate('limit').calendar();
                options.range || that.done(null, 'change');
            },
            nextYear: function() {
                if (addSubYeay()) return;
                dateTime.year++
                that.checkDate('limit').calendar();
                options.range || that.done(null, 'change');
            }
        };
    };

    //日期切换事件
    Class.prototype.changeEvent = function() {
        var that = this,
            options = that.config;

        //日期选择事件
        lay(that.elem).on('click', function(e) {
            lay.stope(e);
        });

        //年月切换
        lay.each(that.elemHeader, function(i, header) {
            //上一年
            lay(header[0]).on('click', function(e) {
                that.change(i).prevYear();
            });

            //上一月
            lay(header[1]).on('click', function(e) {
                that.change(i).prevMonth();
            });

            //选择年月
            lay(header[2]).find('span').on('click', function(e) {
                var othis = lay(this),
                    layYM = othis.attr('lay-ym'),
                    layType = othis.attr('lay-type');

                if (!layYM) return;

                layYM = layYM.split('-');

                that.listYM[i] = [layYM[0] | 0, layYM[1] | 0];
                that.list(layType, i);
                lay(that.footer).find(ELEM_TIME_BTN).addClass(DISABLED);
            });

            //下一月
            lay(header[3]).on('click', function(e) {
                that.change(i).nextMonth();
            });

            //下一年
            lay(header[4]).on('click', function(e) {
                that.change(i).nextYear();
            });
        });

        //点击日期
        lay.each(that.table, function(i, table) {
            var tds = lay(table).find('td');
            tds.on('click', function() {
                that.choose(lay(this));
            });
        });

        //点击底部按钮
        lay(that.footer).find('span').on('click', function() {
            var type = lay(this).attr('lay-type');
            that.tool(this, type);
        });
    };

    //是否输入框
    Class.prototype.isInput = function(elem) {
        return /input|textarea/.test(elem.tagName.toLocaleLowerCase());
    };

    //绑定的元素事件处理
    Class.prototype.events = function() {
        var that = this,
            options = that.config

            //绑定呼出控件事件
            ,
            showEvent = function(elem, bind) {
                elem.on(options.trigger, function() {
                    bind && (that.bindElem = this);
                    that.render();
                });
            };

        if (!options.elem[0] || options.elem[0].eventHandler) return;

        showEvent(options.elem, 'bind');
        showEvent(options.eventElem);

        //绑定关闭控件事件
        lay(document).on('click', function(e) {
            if (e.target === options.elem[0] ||
                e.target === options.eventElem[0] ||
                e.target === lay(options.closeStop)[0]) {
                return;
            }
            that.remove();
        }).on('keydown', function(e) {
            if (e.keyCode === 13) {
                if (lay('#' + that.elemID)[0] && that.elemID === Class.thisElem) {
                    e.preventDefault();
                    lay(that.footer).find(ELEM_CONFIRM)[0].click();
                }
            }
        });

        //自适应定位
        lay(window).on('resize', function() {
            if (!that.elem || !lay(ELEM)[0]) {
                return false;
            }
            that.position();
        });

        options.elem[0].eventHandler = true;
    };


    //核心接口
    laydate.render = function(options) {
        var inst = new Class(options);
        return thisDate.call(inst);
    };

    //得到某月的最后一天
    laydate.getEndDate = function(month, year) {
        var thisDate = new Date();
        //设置日期为下个月的第一天
        thisDate.setFullYear(
            year || thisDate.getFullYear(), month || (thisDate.getMonth() + 1), 1);
        //减去一天，得到当前月最后一天
        return new Date(thisDate.getTime() - 1000 * 60 * 60 * 24).getDate();
    };

    //暴露lay
    window.lay = window.lay || lay;

    //加载方式
    isLayui ? (
        laydate.ready(), layui.define(function(exports) { //layui加载
            laydate.path = layui.cache.dir;
            exports(MOD_NAME, laydate);
        })
    ) : (
        (typeof define === 'function' && define.amd) ? define(function() { //requirejs加载
            return laydate;
        }) : function() { //普通script标签加载
            laydate.ready();
            window.laydate = laydate
        }()
    );

}();

公用方法封装：

       //10. 日期控件格式转换
    //10.1 精确到日
    getDayFormat: function(a, b, c) {
        try {
            var enMonthList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                'Nov', 'Dec'
            ];
            var index = parseInt(b) - 1;
            var cStr = c + ''; //转string类型
            if (cStr.length == 1) {
                cStr = "0" + cStr;
            }
            // return `${a},${enMonthList[index]},${cStr}`;
            return `${cStr}-${enMonthList[index]}-${a}`;      //最终格式
        } catch (e) {
            return `格式错误`;
        }
    },
    //10.2 精确到月
    getMonthFormat: function(a, b) {
        try {
            var enMonthList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                'Nov', 'Dec'
            ];
            var index = parseInt(b) - 1;
            // return `${a},${enMonthList[index]}`;
            return `${enMonthList[index]}-${a}`;              //最终格式
        } catch (e) {
            return `格式错误`;
        }
    },

调用：

                   laydate.render({
                            elem: '#j_operDateStart',
                            type: 'date',
                            lang: 'en',
                            // format: 'dd-MM-yyyy',
                            // value:'01-Mar-2021',
                            done: function(value, date, endDate) {
                                //转换为自己需要的格式
                                if (JSON.stringify(date) != "{}") {
                                    $("#j_operDateStart").val(myUtils.getDayFormat(date.year, date.month,
                                        date.date));
                                }
                            }
                        });

列表：

                                   {
                                        title: '添加时间',
                                        field: 'addTime',
                                        align: 'center',
                                        sortable: true,
                                        width: 200,
                                        formatter: function(value, row, index) {
                                            if (value) {
                                                var date = new Date(value);
                                                var result = myUtils.getDayFormat(date.getFullYear(),
                                                    date.getMonth() + 1, date.getDate());
                                                return result;
                                            } else {
                                                return "";
                                            }
                                        }
                                    }

B.后端改造

　后端不需要改造，因为  01-Mar-2021 这种格式，通过Convert.ToDateTime()，可以直接转换成标准的DateTime类型。

C. 效果 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。