jquery-datetimepicker 自定义时间选择单元格无法获取当前单元格的值（SJS-10834）

1. function DatePickerCellType() {
   
2. 
   
3. }
   
4. 
   
5. DatePickerCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
   
6. 
   
7. DatePickerCellType.prototype.createEditorElement = function () {
   
8. 
   
9.         //Create input presenter.
   
10. 
    
11.         var input = document.createElement("input");
    
12. 
    
13.         return input;
    
14. 
    
15. };
    
16. 
    
17. DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect) {
    
18. 
    
19.         //Initialize input editor.
    
20. 
    
21.         if (editorContext) {
    
22. 
    
23.                 $editor = $(editorContext);
    
24. 
    
25.                 GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, arguments);
    
26. 
    
27.                 $editor.datetimepicker();
    
28. 
    
29.                 $editor.css("position", "absolute");
    
30. 
    
31.                 $editor.attr("gcUIElement", "gcEditingInput");
    
32. 
    
33.                 $(".ui-datetimepicker").attr("gcUIElement", "gcEditingInput");
    
34. 
    
35.         }
    
36. 
    
37. }
    
38. 
    
39. DatePickerCellType.prototype.deactivateEditor = function (editorContext) {
    
40. 
    
41.         //Remove input editor when end editor status.
    
42. 
    
43.         if (editorContext) {
    
44. 
    
45.                 var element = editorContext;
    
46. 
    
47.                 $(element).datetimepicker("hide");
    
48. 
    
49.                 $(element).datetimepicker("destroy");
    
50. 
    
51.         }
    
52. 
    
53.         GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.apply(this, arguments)
    
54. 
    
55. };
    
56. 
    
57. DatePickerCellType.prototype.setEditorValue = function (editor, value) {
    
58. 
    
59.         //Sync value from Cell value to editor value.
    
60. 
    
61.         $(editor).datetimepicker("setDate", value);
    
62. 
    
63. };
    
64. 
    
65. DatePickerCellType.prototype.getEditorValue = function (editor) {
    
66. 
    
67.         //Sync value from editor value to cell value.
    
68. 
    
69.         return $(editor).datetimepicker("getValue");
    
70. 
    
71. };
    
72. 
    
73. DatePickerCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
    
74. 
    
75.         if (editorContext) {
    
76. 
    
77.                 $editor = $(editorContext);
    
78. 
    
79.                 $editor.css("width", cellRect.width - 1);
    
80. 
    
81.                 $editor.css("height", cellRect.height - 3);
    
82. 
    
83.         }
    
84. 
    
85. };

复制代码

基于这个例子：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

经调研，这是由于datetimepicker组件的生命周期与SJS自定义单元格周期不一致。
在执行至 getEditorValue 方法时，此时datetimepicker组件的选择日期还未获取到，
所以最终返回的value为null。
这边需要调研下是否有其他方案，待有结果会在贴中通知您。
本贴先做保留处理。

经调研，可以修改为以下代码解决此问题：

1. DatePickerCellType.prototype.activateEditor = function(editorContext, cellStyle, cellRect) {
   
2.             //Initialize input editor.
   
3.             if (editorContext) {
   
4.                 $editor = $(editorContext);
   
5.                 GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, arguments);
   
6.                 $editor.datetimepicker();
   
7.                 $editor.css("position", "absolute");
   
8.                 $editor.attr("gcUIElement", "gcEditingInput");
   
9.                 $(".xdsoft_datetimepicker").attr('gcUIElement', "gcEditingInput");
   
10.             }
    
11.         }

复制代码

不过这种方式下，选择日期之后不能直接关闭日期控件，需要点击其他单元格来关闭。
除此目前没有更好的解决方案了。

Lynn.Dou 发表于 2021-11-23 11:11
经调研，可以修改为以下代码解决此问题：不过这种方式下，选择日期之后不能直接关闭日期控件，需要点击其他 ...

除了使用 jquery-datetimepicker 还能使用其他的日期时间选择框支持分钟的选择吗

这边未对日期时间选择框控件做相关研究，所以无法给出合适的建议，
您可以实际调研测试下。

问下楼主最后用的是什么其他的日期时间选择器啊

如果需要一般的时间选择，建议就使用我们内置的日期时间下拉框
https://demo.grapecity.com.cn/sp ... -time-picker/purejs

楼主这边用的是自定义单元格
https://demo.grapecity.com.cn/Sp ... emos/datePickerCell