详解easyui基于 layui.laydate日期扩展组件
时间:2018-07-18
这篇文章主要介绍了详解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文件了哦
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- android SurfaceView绘制实现原理解析
- AbstractQueuedSynchronizer实现示例
- PyQt的一个UI单元测试框架思路
- Spring Cloud Zuul实现动态路由
- android应用资源预编译,编译和打包全解析
- Python优雅地dumps非标准类型
- html5标签基础
- 彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系
- 社会化分享
- Android真机安装sqlite3的方法
- 二次元世界的Linux—东方Project之B站掠影
- 带三方登录(qq,微信,微博)
- Android Studio移动鼠标显示悬浮提示的设置方法
- Spring Cloud构建微服务架构:服务注册与发现
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- vscode使用COS作为图床编写markdown文档
- 一文爱上可视化神器Plotly_express
- 神策大数据用户行为分析
- 3分钟短文:为了你少跳坑,Laravel写好了用户授权
- 巧用ingest pipeline实现Elasticsearch索引的重定向
- leetcode之错误的集合
- vue-element怎么给select下拉框赋值?
- vue 怎么将Checkbox 多选框选中的值提交
- Chrome的小恐龙游戏自动躲避障碍物
- Three.js教程(5):光源
- Three.js教程(6):几何体
- Three.js教程(7):材质
- Keep APP技术研究
- Canvas系列(15):实战-小球拖拽
- Canvas系列(16):实战-小球与斜面碰撞