189 8069 5689
这篇文章将为大家详细讲解有关easyui中怎么利用layui.laydate实现一个日期扩展组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联公司是一家专业提供瓦房店企业网站建设,专注与成都做网站、网站设计、成都h5网站建设、小程序制作等业务。10年已为瓦房店众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
/*
基于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);使用方法一：
使用方法二：