详解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 相关文章推荐
js相册效果代码(点击创建即可)
Apr 16 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
three.js实现圆柱体
Dec 30 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
详解Vue的sync修饰符
May 15 Vue.js
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全角字符转换为半角函数
2014/02/07 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
JavaScript延迟加载
2021/03/09 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
对python3新增的byte类型详解
2018/12/04 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
新闻专业个人求职信
2013/12/19 职场文书
中秋节超市促销方案
2014/01/30 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
法人授权委托书
2014/04/03 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2014年个人年终总结
2015/03/09 职场文书
确保工程质量承诺书
2015/04/29 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书