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


Posted in Javascript onJuly 18, 2018

本人后端开发码农一个,公司前端忙的一逼,项目使用的是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文件了哦

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 #Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 #Javascript
webpack4.x打包过程详解
Jul 18 #Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 #Javascript
Vue隐藏显示、只读实例代码
Jul 18 #Javascript
详解vue中axios的封装
Jul 18 #Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python 读取数据库并绘图的实例
2019/12/03 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
幼儿教育感言
2014/02/05 职场文书
创业计划书如何编写
2014/02/06 职场文书
总经理工作职责范文
2014/03/14 职场文书
国际商务专业求职信
2014/07/15 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
合同纠纷调解书
2015/05/20 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技