easyui中怎么利用layui.laydate实现一个日期扩展组件
这篇文章将为大家详细讲解有关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);
使用方法一:
使用方法二:
关于easyui中怎么利用layui.laydate实现一个日期扩展组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
本文名称:easyui中怎么利用layui.laydate实现一个日期扩展组件
文章URL:http://scyanting.com/article/jpdieh.html