javascript - Kendo-ui 网格 : Can the standard HTML5 input date-time be used as a cell editor?

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,       
  },

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

我对 kendo ui 相当陌生(我正在试用它)，所以也许我在这里有一些简单的错误？或者可以使用这个吗？

预先感谢您的帮助 问候，彼得

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);        
 }