KendoUI Grid:自定义编辑表单,datepicker返回false格式

时间:2013-05-25 12:07:36

标签: javascript kendo-ui kendo-grid

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

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

<!-- Datefield -->
#if($.isNumeric(value) == false && value.match(/^\d{2}([.\/-])\d{2}\1\d{4}$/)) {#
<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>  
#}#         

到目前为止,这很好,这应该是应该的。日期选择器&amp;一旦在属于KendoGrid的'edit'方法中打开弹出窗口,就会创建timepicker,如下所示:

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时间。< / p>

我搜索过KendoForums,Google&amp; StackOverflow但我似乎无法找到任何人有同样的问题。这可能是因为我使用了错误的搜索关键字..无论情况如何:是否有人遇到过同样的问题或谁知道解决方案是什么?

//编辑:一点点补充,使问题更清晰(我希望):

  1. 创建KendoGrid工作
  2. 将自定义模板表单绑定到编辑弹出窗口
  3. 首先,所有字段都显示正确的类型(bool / numeric / date / time / text)
  4. 在编辑弹出窗口中,日期格式正确,因为我需要id
  5. 保存数据时发生错误,弹出回到数据源返回的值包含YYYY-mm-ddTHH:ii:ss.000Z格式而不是dd-mm-YYYY

1 个答案:

答案 0 :(得分:2)

Kendo UI将日期存储为JavaScript Date对象,因此它始终以其存储(无论如何显示或输入)。

在服务器上接受此格式,或在dd-mm-YYYY的{​​{1}}和create函数中将其转换为update

您可以在transport.create.datatransport.update.datatransport.parameterMap中实施功能。