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

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

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

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

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

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

easyUI版本：V1.5.2

layDate版本：V5.0

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

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

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