KendoUI Grid：自定义编辑表单，日期选择器返回错误格式

Posted 2023-05-07

【中文标题】KendoUI Grid：自定义编辑表单，日期选择器返回错误格式

【英文标题】：KendoUI Grid: custom edit form with datepicker returning false format

【发布时间】：2013-05-20 21:45:33

【问题描述】：

我在使用 KendoUI 网格时遇到了问题。到目前为止，设置按预期工作。我创建了一个包含 5 个条目的自定义数据源，所有条目都包含标题、描述和值。这些值可以不同，它们可以是：布尔值、数字、文本、日期或时间。

使用自定义 KendoTemplate 进行编辑弹出窗口，我可以让弹出窗口根据值显示正确的字段类型：

<!-- Datefield -->
#if($.isNumeric(value) == false && value.match(/^\d2([.\/-])\d2\1\d4$/)) #
<li>
    <label>Waarde</label>
    <input id="datepicker" data-bind="value:value" style="width: 40%;" />
</li> 
# else if($.isNumeric(value) == false && value.match('([01]?[0-9]|2[0-3]):[0-5][0-9]')) #
<li>
    <label>Waarde</label>
    <input id="timepicker" data-bind="value:value" style="width: 40%;" />
</li> 
<!-- Yes/No Radio button if value is J(=Yes) or N(=No) -->    
# else if (value == "J" || value == "N") #
<li>
    <label>Waarde</label>
    <input type="radio" name="value" data-bind="checked:value" value="J" /> Ja
    <input type="radio" name="value" data-bind="checked:value" value="N" /> Nee
</li>                   
<!-- If the value is Numeric then show a numeric textbox -->
# else if($.isNumeric(value)) #                                           
<li>
    <label>Waarde</label>
    <input type="text" data-bind="value:value" data-role="numerictextbox" style="width:50%;" />
</li>                   
<!-- Else: textfield for the value -->
#else #                                           
<li>
    <label>Waarde</label>
    <input type="text" data-bind="value:value" class="k-textbox" />
</li>  
##         

到目前为止一切都很好，这就像它应该的那样工作。只要在属于 KendoGrid 的“编辑”方法中打开弹出窗口，就会创建日期选择器和时间选择器，如下所示：

if($('#datepicker').length > 0) 
    console.log('datefield');
    $("#datepicker").kendoDatePicker(
        format: "dd-MM-yyyy",
        parseFormats: ["dd-MM-yyyy"]    
    ); 

if($('#timepicker').length > 0) 
    console.log('timefield');
    $("#timepicker").kendoTimePicker(
        timeFormat: "HH:mm" 
    ); 

但是（！）一件事出了问题。没有什么我试过的，编辑表单发布的返回值不包含19-11-2013之类的日期，但包含19-11-2013T00:00:00.000Z之类的日期。至少脚本的基础是工作的，但由于这种格式，这个字段在编辑后被识别为“时间”而不是“日期”：我真的只需要 dd-mm-yyyy 通知和 HH:ii 时间。

我已经搜索了 KendoForums、Google 和 ***，但我似乎找不到任何有同样问题的人。可能是因为我使用了错误的搜索关键字.. 不管是什么情况：有没有人遇到过同样的问题或知道解决方案是什么？

//编辑：添加一点让问题更清楚（我希望）：

创建 KendoGrid 作品 将自定义模板表单绑定到编辑弹出窗口也很有效 首先所有字段都显示正确的类型（布尔/数字/日期/时间/文本） 在编辑弹出窗口中，日期格式正确，因为我需要 id 保存数据时出现错误，弹回数据源返回的值包含YYYY-mm-ddTHH:ii:ss.000Z格式而不是dd-mm-YYYY

【参考方案1】：

Kendo UI 将日期存储为 javascript Date 对象，因此它始终以它的形式存储（无论它如何显示或输入）。

要么在服务器上接受此格式，要么在DataSource.transport 的create 和update 函数中将其转换为dd-mm-YYYY。

您可以在transport.create.data 和transport.update.data 或transport.parameterMap 中实现一个函数。

【讨论】：

是的，我注意到了日期对象。这种方法的唯一方式是我无法弄清楚它是需要更新的日期还是时间字段。有什么想法吗？

但是您知道自己愿意存储什么，不是吗？数据类型是知道是日期还是时间的唯一方法吗？为什么不使用两个不同的字段？

目前这是唯一的办法。原因是输入来自另一个系统，第二个字段不是一个选项（至少..可能是最后一个选项）..

我与数据一起存储了一个值类型的字符串。没有其他选择。谢谢你的帮助。网格中的格式问题很简单：我完全忘记了我可以使用 php DataSource 更改格式！