easyui中怎么利用layui.laydate实现一个日期扩展组件

这篇文章将为大家详细讲解有关easyui中怎么利用layui.laydate实现一个日期扩展组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

/* 基于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>

关于easyui中怎么利用layui.laydate实现一个日期扩展组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。