easyui基於 layui.laydate日期擴展組件

本人後端開發碼農一個，公司前端忙的一逼，項目使用的是easyui組件，其自帶的datebox組件使用起來非常不爽，主要表現在

1、自定義顯示格式很麻煩

2、選擇年份和月份用戶體驗也不好

網上有關於和My97DatePicker結合的例子，但感覺也用的不是很爽。

發現國內的layDate體驗非常滿意，所以萌生出想把這兩個組件組合起來的想法，具體代碼如下，本人非前端，所以只是實現了基本功能，大神勿噴哦。

easyUI版本：V1.5.2

layDate版本：V5.0

/*
基於laydate日期擴展組件
*/
(function ($) {
    function createBox(target) {
        var state = $.data(target, 'laydate');
        var opts = state.options;
        $(target).addClass('datebox-f').textbox($.extend({}, opts, {
            editable: false,
            icons: [{ iconCls: 'combo-arrow' }]
        }));
        $(target).next("span.textbox").addClass('datebox');
        laydate.render({
            elem: '#' + $(target).next("span.textbox").children(":text").attr("id"), //指定元素,
            format: opts.format,
            type: opts.datetype,
            min: opts.min,
            max: opts.max,
            zIndex :opts.zIndex ,
            range :opts.range ,
            theme: opts.theme,
            calendar: opts.calendar,
            mark: opts.mark,
            done: function (value, date, endDate) {
                $(target).textbox('setValue', value);
                opts.onSelect.call(target, value, date, endDate);
            },
            change: function(value, date, endDate) {
                opts.onChange.call(target, value, date, endDate);
            }
        });
    }
    $.parser.plugins.push("laydate");//註冊擴展組件
    $.fn.laydate = function (options, param) {
        if (typeof options == 'string') {
            var method = $.fn.laydate.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.textbox(options, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, 'laydate');
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, 'laydate', {
                    options: $.extend({}, $.fn.laydate.defaults, $.fn.laydate.parseOptions(this), options)
                });
            }
            createBox(this);
        });
    };
    $.fn.laydate.methods = {
        options: function (jq) {
            var copts = jq.textbox('options');
            return $.extend($.data(jq[0], 'laydate').options, {
                width: copts.width,
                height: copts.height,
                originalValue: copts.originalValue,
                disabled: copts.disabled,
                readonly: copts.readonly
            });
        }
    };
    $.fn.laydate.parseOptions = function (target) {
        return $.extend({}, $.fn.textbox.parseOptions(target));
    };
    $.fn.laydate.defaults = $.extend({}, $.fn.textbox.defaults,
        {
            //laydate 參數說明：http://www.layui.com/doc/modules/laydate.html#type
            theme: "#0099cc",
            datetype: "date",//控制項選擇類型 year month date time datetime
            range: false,//開啟左右面板範圍選擇  或 range: '~' 來自定義分割字元

            //最小/大範圍內的日期時間值  
            //如果值為字元類型，則：年月日必須用 -（中劃線）分割、時分秒必須用 :（半形冒號）號分割。這裡並非遵循 format 設定的格式
            //如果值為整數類型，且數字＜86400000，則數字代表天數，如：min: -7，即代表最小日期在7天前，正數代表若幹天後
            //如果值為整數類型，且數字 ≥ 86400000，則數字代表時間戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日
            min: '1900-1-1',
            max: '2099-12-31',

            format: "yyyy-MM-dd",//自定義格式
            zIndex: 66666666,//層疊順序
            calendar: false,//是否顯示西曆節日

            //標註重要日子
            //每年的日期	{'0-9-18': '國恥'}	0 即代表每一年
            //每月的日期	{'0-0-15': '中旬'}	0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
            //特定的日期	{'2017-8-21': '發佈')
            mark: {},
            onSelect: function (value, date, endDate) { },
            onChange: function (value, date, endDate) { }
        });

})(jQuery);

使用方法一：

<input name="BYXX" type="text" id="BYXX" class="easyui-laydate" data-options="width:200,datetype:'month'" />

 使用方法二：

    <input type="text" id="BYXX" />
    <script type="text/javascript">
        $(function () {
            $("#BYXX").laydate({ width: 200, datetype: 'month' });
        });
    </script>

 別忘記引用jquery、easyui和laydate的js文件了哦