Kendo-ui 网格：标准 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,       
  },

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

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

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

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

html

javascript

jquery

kendo-ui

kendo-grid