Kendo-ui Grid：标准 HTML5 输入日期时间可以用作单元格编辑器吗？

Question

我一直在尝试使用标准 html5 输入作为 kendo-ui 网格中的单元格编辑器 即

<input type="datetime-local" value="1996-12-19T16:39:57" />

我喜欢这个日期时间小部件，因为您可以使用箭头键转到每个日期时间组件，然后使用向上向下箭头编辑日期时间的那部分。

我已经尝试定义以下单元格模板函数..

 function timeEditor(container, options) {
    var input = $('<input "datetime-local" name="' + options.field +'" />')
   input.appendTo(container);        
 }

并将其提供给列定义中的相应字段..

columns: [
  {
    field: "Time",
    title: "Time",
    width: "180px",
    editor: timeEditor,       
  },

编辑器已实例化（我在其中遇到了一个断点），但我没有让控件按预期显示。

我对剑道用户界面相当陌生（我正在试用它），所以也许我在这里有一些简单的错误？或者可以用这个吗？

提前感谢您的帮助 问候，彼得

Answer 1

你做对了，只是你的 HTML 是错误的。

<input "datetime-local ...

缺少type= 属性名称，应该是：

<input type="datetime-local ...

另外请记住，在自定义编辑器中，如果有人更改输入框的值，您将不得不进行设置值和更新数据的工作，因此您可能需要添加 .on('change' ...)事件处理程序。

一个完整的编辑器看起来像这样：

function timeEditor(container, options) {
    var input = $('<input type="datetime-local" name="'
        + options.field
        +'" value="'
        + options.model.get(options.field)
        + '" />');
    input.on('change', options.model.set(options.field, input.val()));
    input.appendTo(container);        
 }