jquery-datetimepicker 自定义时间选择单元格无法获取当前单元格的值(SJS-10834)
本帖最后由 Lynn.Dou 于 2021-11-15 12:26 编辑function DatePickerCellType() {
}
DatePickerCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
DatePickerCellType.prototype.createEditorElement = function () {
//Create input presenter.
var input = document.createElement("input");
return input;
};
DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect) {
//Initialize input editor.
if (editorContext) {
$editor = $(editorContext);
GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, arguments);
$editor.datetimepicker();
$editor.css("position", "absolute");
$editor.attr("gcUIElement", "gcEditingInput");
$(".ui-datetimepicker").attr("gcUIElement", "gcEditingInput");
}
}
DatePickerCellType.prototype.deactivateEditor = function (editorContext) {
//Remove input editor when end editor status.
if (editorContext) {
var element = editorContext;
$(element).datetimepicker("hide");
$(element).datetimepicker("destroy");
}
GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.apply(this, arguments)
};
DatePickerCellType.prototype.setEditorValue = function (editor, value) {
//Sync value from Cell value to editor value.
$(editor).datetimepicker("setDate", value);
};
DatePickerCellType.prototype.getEditorValue = function (editor) {
//Sync value from editor value to cell value.
return $(editor).datetimepicker("getValue");
};
DatePickerCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
if (editorContext) {
$editor = $(editorContext);
$editor.css("width", cellRect.width - 1);
$editor.css("height", cellRect.height - 3);
}
};基于这个例子:https://demo.grapecity.com.cn/SpreadJS/cdn/extendedExample/#/demos/datePickerCell
依赖jQuery-datetimepicker 始终无法将选择的日期填入单元格,getEditorValue 方法始终无法拿到日期值
jquery-datetimepicker:https://xdsoft.net/jqplugins/datetimepicker/
您好,
需要先根据您提供的代码整理为demo,尝试复现此问题,
这需要一定的时间,待有结果会在本贴回复您。
您可以直接提供一个可复现可运行demo,这样能更快的复现问题。 Lynn.Dou 发表于 2021-11-11 18:37
您好,
需要先根据您提供的代码整理为demo,尝试复现此问题,
这需要一定的时间,待有结果会在本贴回复您 ...
这个dateTimePicker.zip 本帖最后由 Lynn.Dou 于 2021-11-12 14:53 编辑
经调研,这是由于datetimepicker组件的生命周期与SJS自定义单元格周期不一致。
在执行至 getEditorValue 方法时,此时datetimepicker组件的选择日期还未获取到,
所以最终返回的value为null。
这边需要调研下是否有其他方案,待有结果会在贴中通知您。
本贴先做保留处理。
经调研,可以修改为以下代码解决此问题:DatePickerCellType.prototype.activateEditor = function(editorContext, cellStyle, cellRect) {
//Initialize input editor.
if (editorContext) {
$editor = $(editorContext);
GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, arguments);
$editor.datetimepicker();
$editor.css("position", "absolute");
$editor.attr("gcUIElement", "gcEditingInput");
$(".xdsoft_datetimepicker").attr('gcUIElement', "gcEditingInput");
}
}不过这种方式下,选择日期之后不能直接关闭日期控件,需要点击其他单元格来关闭。
除此目前没有更好的解决方案了。
Lynn.Dou 发表于 2021-11-23 11:11
经调研,可以修改为以下代码解决此问题:不过这种方式下,选择日期之后不能直接关闭日期控件,需要点击其他 ...
除了使用 jquery-datetimepicker 还能使用其他的日期时间选择框支持分钟的选择吗 这边未对日期时间选择框控件做相关研究,所以无法给出合适的建议,
您可以实际调研测试下。 问下楼主最后用的是什么其他的日期时间选择器啊 如果需要一般的时间选择,建议就使用我们内置的日期时间下拉框
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/cells/drop-downs/date-time-picker/purejs
楼主这边用的是自定义单元格
https://demo.grapecity.com.cn/SpreadJS/cdn/extendedExample/#/demos/datePickerCell
页:
[1]