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

2023-09-10 04:44:04 333

本人后端开发码农一个，公司前端忙的一逼，项目使用的是easyui组件，其自带的datebox组件使用起来非常不爽，主要表现在

1、自定义显示格式很麻烦

2、选择年份和月份用户体验也不好

网上有关于和My97DatePicker结合的例子，但感觉也用的不是很爽。

发现国内的layDate体验非常满意，所以萌生出想把这两个组件组合起来的想法，具体代码如下，本人非前端，所以只是实现了基本功能，大神勿喷哦。

easyUI版本：V1.5.2

layDate版本：V5.0

/*
基于laydate日期扩展组件
*/
(function($){
functioncreateBox(target){
varstate=$.data(target,'laydate');
varopts=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(typeofoptions=='string'){
varmethod=$.fn.laydate.methods[options];
if(method){
returnmethod(this,param);
}else{
returnthis.textbox(options,param);
}
}
options=options||{};
returnthis.each(function(){
varstate=$.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){
varcopts=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",//控件选择类型yearmonthdatetimedatetime
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即代表每年每月（layui2.1.1/layDate5.0.4新增）
//特定的日期{'2017-8-21':'发布')
mark:{},
onSelect:function(value,date,endDate){},
onChange:function(value,date,endDate){}
});

})(jQuery);

使用方法一：

使用方法二：



$(function(){
$("#BYXX").laydate({width:200,datetype:'month'});
});

别忘记引用jquery、easyui和laydate的js文件了哦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐