本人后端开发编程之家一个，公司前端忙的一逼，项目使用的是easyui组件，其自带的dateBox组件使用起来非常不爽，主要表现在
2、选择年份和月份用户体验也不好
网上有关于和 My97DatePicker 结合的例子，但感觉也用的不是很爽。
发现国内的layDate体验非常满意，所以萌生出想把这两个组件组合起来的想法，具体代码如下，本人非前端，所以只是实现了基本功能，大神勿喷哦。
easyUI版本：V1.5.2
layDate版本：V5.0
rush:js;">
/*
基于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,endDate);
},change: function(value,endDate) {
opts.onChange.call(target,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: '~' 来自定义分割字符
//最小/大范围内的日期时间值
//如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（<a href="https://www.jb51.cc/tag/banjiao/" target="_blank" class="keywords">半角</a>冒号）号分割。这里并非遵循 format 设定的格式
//如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
//如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日
min: '1900-1-1',max: '2099-12-31',format: "yyyy-MM-dd",//<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>格式
zIndex: 66666666,//层叠顺序
calendar: false,//是否<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>公历节日
//标注重要日子
//每年的日期 {'0-9-18': '国耻'} 0 即代表每一年
//每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
//特定的日期 {'2017-8-21': '发布')
mark: {},onSelect: function (value,endDate) { },onChange: function (value,endDate) { }
});})(jQuery);
使用方法一：
rush:xhtml;">
使用方法二：
rush:js;">