详解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文件了哦



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