knockout-2.0 - Kendo datepicker 以长格式显示日期和时间如何避免它

Question

这是我正在使用的代码，可以通过单击此链接 http://jsfiddle.net/fGq5w/1/看到 在单击按钮时，我更改了日期。但时间也会显示。单击按钮时如何单独显示一个日期。

代码

       <input id="myDatePicker" data-bind="value: currentDate" />

        <h2>Current Date is:<strong data-bind="text: currentDate"></strong></h2>

      <input type='button' value='change Date' onclick='changeDate();return false;'  />

Javascript

var vm = {
    currentDate: ko.observable()   
};


$(function(){

ko.applyBindings(vm);

$("#myDatePicker").kendoDatePicker();

});

function changeDate()
{
 alert('ok');
 vm.currentDate(new Date(2014,1,1));

}

Answer 1

Your Code with additional functionality to pre-fill the date TextBox.

  var vm = {
        currentDate: ko.observable(kendo.toString(new Date(),'MM/dd/yyyy'))   
    };


$(function(){

    ko.applyBindings(vm);

    $("#myDatePicker").kendoDatePicker();

});

    enter code here

function changeDate()
{
  alert('ok');
  vm.currentDate(kendo.toString(new Date(2014,1,1),'MM/dd/yyyy'));

}

Answer 2

这更像是一个剑道问题。只需使用 kendo 的日期格式化工具格式化日期：

http://docs.kendoui.c​​om/getting-started/framework/globalization/dateformatting

例如...

vm.currentDate(kendo.toString(new Date(2013,0,1), "MM/dd/yyyy"));

Answer 3

在 Knockout 3.3.0 中，您可以创建一个扩展来处理格式化，因为手动调用函数并不是非常理想：

（在下面的狙击手中，我使用 moment.js 来解析日期，但您可以使用 kendo 的日期解析器 - 尽管它不适用于某些 ISO 格式的日期）

ko.extenders.stripTime = function (target) {
    var result = ko.pureComputed({
        read: target,
        write: function (value) {
            if (value) {
                target(moment(value).format(shell.getDateFormatString()));
            }
            else {
                target(value);
            }
        }
    }).extend({ notify: 'always' });

    result(target());

    return result;
};

在您的客户端视图模型中，将扩展应用到您的 observable：

self.SomeDateProperty = ko.observable().extend({ stripTime: null });

我建议您在使用 kendo datepicker 时尝试从 observables 中获取 javascript 对象时不要使用 ko.toJS - 而是使用 ko.mapping（您需要单独下载 JS 库）。

var someJavascriptObject = ko.mapping.toJS(viewModel);