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

2018-07-18 01:43:30来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

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

上一篇:JavaScript基础

下一篇:for循环与forEach性能思考