Javascript 剑道时间选择器MVVM绑定到OData结果
我有一个来自odata端点的模型,我绑定到一个表单,唯一不会玩球的控件是时间选择器 以下是初始化代码:Javascript 剑道时间选择器MVVM绑定到OData结果,javascript,mvvm,kendo-ui,odata,kendo-timepicker,Javascript,Mvvm,Kendo Ui,Odata,Kendo Timepicker,我有一个来自odata端点的模型,我绑定到一个表单,唯一不会玩球的控件是时间选择器 以下是初始化代码: my.api.get("odata url", function (res) { var model = new kendo.observable(res); var component = $("#editor"); kendo.bind(component, model); $("#editor").data("model", model); }); 以下是表单中
my.api.get("odata url", function (res) {
var model = new kendo.observable(res);
var component = $("#editor");
kendo.bind(component, model);
$("#editor").data("model", model);
});
以下是表单中工作日期选择器字段标记的示例:
<li class="Field">
<label for=""> End</label>
<div class="value">
<span class="k-widget k-datepicker k-header k-input"><span class="k-picker-wrap k-state-default"><input class="k-input" data-bind="value: End" data-format="dd MMM yyyy" data-role="datepicker" data-val="true" data-val-required="The End field is required." id="End" name="End" type="text" value="2020-11-17" style="width: 100%;" role="combobox" aria-expanded="false" aria-owns="End_dateview" aria-disabled="false" aria-readonly="false"><span unselectable="on" class="k-select" role="button" aria-controls="End_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>
<span class="field-validation-valid" data-valmsg-for="End" data-valmsg-replace="true"></span>
</div>
</li>
所以我的问题是。。。为了让剑道时间选择器控件像其他控件一样工作,需要执行什么样的黑魔法?好的,我想出来了 事实证明,剑道时间选择器不能绑定到UTC datetimeoffset字符串,但如果我在绑定之前将它们解析为javascript日期对象,那么作为普通剑道绑定可以解决这个问题 对我来说有一股不好的代码味道。。。我认为telerik至少应该自动处理UTC通用字符串和日期对象,但这并不是世界末日,只是意味着我必须在将模型数据交给kendo之前“预处理”模型数据
耶,剑道主义生命中的又一天 这可能有点离题,但我一直在我的项目中使用剑道日期选择器,最近我发现剑道船上有内置的日期分析器和格式化程序。使我不必再获得另一个开源日期管理库我只使用JS Date.parse(dateString)函数,在UTC日期格式正确的情况下工作得非常好。我想我的答案是,如果给定一个字符串,我想绑定到元素值属性中的picker/a值,那么剑道应该这样做。在我看来,这是剑道框架中的一个bug。
<li class="Field">
<label for="Default_Calculation_Time">Default Calculation Time</label>
<div class="value">
<span class="k-widget k-timepicker k-header k-input"><span class="k-picker-wrap k-state-default"><input class="k-input" data-bind="value: AutoCalculationTime" data-format="hh:mm tt" data-role="timepicker" data-val="true" data-val-required="The Default Calculation Time field is required." id="AutoCalculationTime" name="AutoCalculationTime" type="text" value="02:30 PM" role="combobox" aria-expanded="false" aria-owns="AutoCalculationTime_timeview" aria-disabled="false" aria-readonly="false" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="AutoCalculationTime_timeview"><span unselectable="on" class="k-icon k-i-clock">select</span></span></span></span>
<span class="field-validation-valid" data-valmsg-for="AutoCalculationTime" data-valmsg-replace="true"></span>
</div>
</li>
{
@odata.context: "https://apitest.corporatelinx.com/ACOFI/$metadata#Programme/$entity"
AutoCalculationTime: "2000-01-01T14:30:00Z"
AutoCutoffTime: "2000-01-01T14:00:00Z"
Description: "ACOFI DEMO Buyer Programme"
End: "2020-11-17T18:22:46.953Z"
FundCount: 3
Id: 3
Name: "ACOFI Demo Programme"
Start: "2015-11-17T18:22:46.953Z"
_events: Object
uid: "28dd1327-ed4a-4b24-9418-8b86d143acd7"
__proto__: i
}