[7.0.100.0]layui日期组件分享

Chelsey.Wang

本帖最后由 x1061875478 于 2021-9-29 20:30 编辑

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

插件效果：
image.png89549254.png

国庆后layui将发布2.7.0版本，重写了日期范围的交互逻辑，之后更新会基于2.7版本更新。
可能会更新吧

21/9/29
根据大佬的指点进行了改进：
引用单元格正常了
laydate2.0.0.0.gif779056701.png

最新版：

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

lovert · lovert

本帖最后由 lovert 于 2021-9-29 14:46 编辑

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{}把全局变量的值赋给单元格对象，这样单元格的值就被替换了

lovert · lovert

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

x1061875478 · x1061875478

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

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

x1061875478 · x1061875478

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

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

lovert · lovert

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

lovert · lovert

var QRC = (function (_super) {
__extends(QRC, _super);
function QRC() {
return _super !== null && _super.apply(this, arguments) || this;
}
function utf16to8(str) {//函数目的编码转化函数使中文可以显示
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
QRC.prototype.text = "";//定义一个插件属性，全局变量随插件生成而生成随插件灭亡而灭亡
QRC.prototype.createContent = function () {//在单元格对象上创建一个div
var container = $("<div id='" + this.ID + "'></div>");
return container;
};
QRC.prototype.setValueToElement = function (element, value) {
this.text = value;//把单元格在设计器里填写的值赋给this.text//text是我在插件对象里定义的属性
var cellTypeMetaData = this.CellElement.CellType;
if (this.text !== "") {
var id = '#' + this.ID;
$(id).empty();
var widthv = cellTypeMetaData.Widthv;//获取设置的高宽
var heightv = cellTypeMetaData.Heightv;
defaultValue = this.text.toString();//转成字符串
jQuery(id).qrcode({ width: widthv, height: heightv, text: utf16to8(defaultValue) });//二维码绑定在元素上。也就是生成二维码
}
};
QRC.prototype.disable = function () {
_super.prototype.disable.call(this);
};
QRC.prototype.enable = function () {
_super.prototype.enable.call(this);
};
return QRC;
}(Forguncy.CellTypeBase));
// Key format is "Namespace.ClassName, AssemblyName"
Forguncy.Plugin.CellTypeHelper.registerCellType("QRC.QRC, QRC", QRC);

复制代码

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

lovert · lovert

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

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

回复 · 15285159209

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

x1061875478 · x1061875478

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

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

		自动登录	找回密码
密码			立即注册

[资源分享] [7.0.100.0]layui日期组件分享

评分

30 个回复