[7.0.100.0]layui日期组件分享

layui作为最经典的前端框架之一，其官网将于2021年10月13日下钱，回归最纯粹的开源当中去。

这个版本的laydate插件是基于layui2.6.8版本制作，最低支持活字格设计器6.0.100.0

主要解决我个人开发中的几个问题：
1、不与外部引入的layui冲突
2、提供多种日期时间的选择
3、可以自定义格式
4、可直接获取时间格式的值

此前已经有个人开发者制作了"lay日期"这款插件，是个不错的插件，本插件并不是为了替换它，而是为了满足不同需求而开发。
"lay日期"使用了laydate的独立组件开发导致外部引入layui时会发生冲突，所以我决定重新进行简单的封装，同时根据我的业务场景进行定制。
如果有与我相同需求的可以试试这款插件，要注意的是它并不能与"lay日期"共存，所以如果你已经使用的lay日期并且没有问题，没有必要安装此插件。

这个版本还存在一些问题，主要是技术力有限导致，如果有大佬指点一下最好：
1、引用单元格不能获取值，所以引用单元格的功能暂时不可用，只能手动设置属性。
2、颜色不能使用选择器。
3、由于是个人的插件，比如表格这种控件时无法使用此插件的。

因为官方的插件教程就是laydate的封装，所以可以照着制作，后面的文档不是太详细还需要慢慢摸索。

最后希望官方能完善好日期控件，让大家开发更加高效。

关于格式问题可以先参考官网描述：
layDate - JS 日期和时间选择器组件/插件 - 在线演示 - Layui

插件效果：


国庆后layui将发布2.7.0版本，重写了日期范围的交互逻辑，之后更新会基于2.7版本更新。
可能会更新吧
21/9/29
根据大佬的指点进行了改进：
引用单元格正常了

最新版：
LayDateCellType.zip (368.08 KB, 下载次数: 76, 售价: 30 金币)

2021-9-29 20:28 上传

点击文件名下载附件
2.0.0.0

1、选择单元格不能获取值，所以选择单元格的功能暂时不可用。
插件名.prototype.setValueToElement = function (element, value) {
//这里的value，就是单元格在设计器里填写的值，这个是页面把单元加载完成后得到的值，你可以把获取单元值得部分laydate逻辑写在这里；
}
插件名.prototype.OkValue = "";//全局的变量
插件名.prototype.getValueFromElement = function () {
       //这里是操作过程中获取的值赋值给单元格对象的逻辑，你可以定义一个全局的变量
return this.OkValue;
    };
this.OkValue=laydatevalue;//done操作回调值;
self.commitValue();//这个要配合//提交后这个值才被赋给单元对象
//上面两条语句写在回调函数里
也就是说执行了self.commitValue();提交，等于执行了.prototype.getValueFromElement接口这个你可以dug一下.prototype.getValueFromElement{}内的语句；你会发现，只要完成self.commitValue();就会在.prototype.getValueFromElement{}内打断，不执行self.commitValue();.prototype.getValueFromElement{}内的语句也不会被执行；

他的逻辑是先把插件的值赋给全局变量插件名.prototype.OkValue；然后提交self.commitValue();然后让.prototype.getValueFromElement{}把全局变量的值赋给单元格对象，这样单元格的值就被替换了

表格中如果要想用这个插件，那就得写更多的代码了，要在C#端写很多表格的接口，我没有实现过，JS端的逻辑也就更复杂了，既要写判断是单元格还是表格，还要判断是表格的哪一行那一列，复杂的很，建议不是官方程序员，最后别碰，不然bug会很多，调试都让人头大

lovert 发表于 2021-9-29 14:41
表格中如果要想用这个插件，那就得写更多的代码了，要在C#端写很多表格的接口，我没有实现过，JS端的逻辑也 ...

嗯，这不是这个插件的开发目的，最后还是希望用上官方的控件。

lovert 发表于 2021-9-29 14:36
1、选择单元格不能获取值，所以选择单元格的功能暂时不可用。
插件名.prototype.setValueToElement = func ...

感谢，回去我试试完善一下。

https://help.grapecity.com.cn/pa ... ion?pageId=56535180
官方接口文档

1. var QRC = (function (_super) {
   
2.     __extends(QRC, _super);
   
3.     function QRC() {
   
4.         return _super !== null && _super.apply(this, arguments) || this;
   
5.     }
   
6.     function utf16to8(str) {//函数目的编码转化函数使中文可以显示
   
7.         var out, i, len, c;
   
8.         out = "";
   
9.         len = str.length;
   
10.         for (i = 0; i < len; i++) {
    
11.             c = str.charCodeAt(i);
    
12.             if ((c >= 0x0001) && (c <= 0x007F)) {
    
13.                 out += str.charAt(i);
    
14.             } else if (c > 0x07FF) {
    
15.                 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
    
16.                 out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
    
17.                 out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    
18.             } else {
    
19.                 out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
    
20.                 out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    
21.             }
    
22.         }
    
23.         return out;
    
24.     }
    
25.     QRC.prototype.text = "";//定义一个插件属性，全局变量随插件生成而生成随插件灭亡而灭亡
    
26.     QRC.prototype.createContent = function () {//在单元格对象上创建一个div
    
27. var container = $("<div id='" + this.ID + "'></div>");
    
28.          return container;
    
29.     };
    
30.      QRC.prototype.setValueToElement = function (element, value) {
    
31.         this.text = value;//把单元格在设计器里填写的值赋给this.text//text是我在插件对象里定义的属性
    
32.         var cellTypeMetaData = this.CellElement.CellType;
    
33.         if (this.text !== "") {
    
34.             var id = '#' + this.ID;
    
35.             $(id).empty();
    
36.             var widthv = cellTypeMetaData.Widthv;//获取设置的高宽
    
37.             var heightv = cellTypeMetaData.Heightv;
    
38.             defaultValue = this.text.toString();//转成字符串
    
39.             jQuery(id).qrcode({ width: widthv, height: heightv, text: utf16to8(defaultValue) });//二维码绑定在元素上。也就是生成二维码
    
40. 
    
41.         }
    
42.     };
    
43.    QRC.prototype.disable = function () {
    
44.         _super.prototype.disable.call(this);
    
45.     };
    
46. 
    
47.     QRC.prototype.enable = function () {
    
48.         _super.prototype.enable.call(this);
    
49.     };
    
50.         return QRC;
    
51. }(Forguncy.CellTypeBase));
    
52. 
    
53. // Key format is "Namespace.ClassName, AssemblyName"
    
54. Forguncy.Plugin.CellTypeHelper.registerCellType("QRC.QRC, QRC", QRC);
    

复制代码

这个我二维码插件的js代码，没有写onLoad，把逻辑都写到了 QRC.prototype.setValueToElement{}里了

x1061875478 发表于 2021-9-29 14:43
嗯，这不是这个插件的开发目的，最后还是希望用上官方的控件。

官方是不会把这个做成官方插件的，因为这个要遵循开源协议，如果用那么官方就得把自己所有的代码开源，显然这是不可能的

辛苦大神了，期待支持时间范围选择

15285159209 发表于 2021-9-29 20:03
辛苦大神了，期待支持时间范围选择

时间范围使用两个控就可以了，单独一个选择时间范围的话传出来的值不太实用把