boy 发表于 2021-11-11 17:36:32

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/





Lynn.Dou 发表于 2021-11-11 18:37:39

您好,
需要先根据您提供的代码整理为demo,尝试复现此问题,
这需要一定的时间,待有结果会在本贴回复您。

您可以直接提供一个可复现可运行demo,这样能更快的复现问题。

boy 发表于 2021-11-11 18:46:14

Lynn.Dou 发表于 2021-11-11 18:37
您好,
需要先根据您提供的代码整理为demo,尝试复现此问题,
这需要一定的时间,待有结果会在本贴回复您 ...

这个dateTimePicker.zip

Lynn.Dou 发表于 2021-11-12 14:29:16

本帖最后由 Lynn.Dou 于 2021-11-12 14:53 编辑

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

Lynn.Dou 发表于 2021-11-23 11:11:37

经调研,可以修改为以下代码解决此问题: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");
            }
      }不过这种方式下,选择日期之后不能直接关闭日期控件,需要点击其他单元格来关闭。
除此目前没有更好的解决方案了。

boy 发表于 2021-11-23 11:26:33

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

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

Lynn.Dou 发表于 2021-11-23 12:04:45

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

小弟弟 发表于 2023-4-6 13:54:45

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

Richard.Ma 发表于 2023-4-6 18:13:34

如果需要一般的时间选择,建议就使用我们内置的日期时间下拉框
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]
查看完整版本: jquery-datetimepicker 自定义时间选择单元格无法获取当前单元格的值(SJS-10834)