easyui基于 layui.laydate日期扩展组件

Posted 2020-12-05 caiqin

本人后端开发码农一个，公司前端忙的一逼，项目使用的是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文件了哦