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

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

本文关键字：单元格 编辑器 时间 日期 Grid ui 标准 输入 HTML5 Kendo      更新时间：2023-09-26

我一直在尝试使用标准的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,       
  },

编辑器被实例化了（我在它命中了一个断点），但我没有得到预期的控件。

我是剑道ui的新手（我正在试用它），所以也许我在这里有什么简单的错误？或者可以使用这个吗？

提前感谢您的帮助尊敬的Peter

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

<input "datetime-local ...

缺少type= atrubute名称，应为：

<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);        
 }
相关文章：