Question

当我从我的文本框中将日期保存到DataBase时，它将保存为日期时间I.e 2014-06-03T00：00：00 。

所以问题就是这个问题我希望这个东西能够缩短并在我的文本框中显示日期部分我的负载I.e 2014-06-03

我尝试了一种替代方法，将Model属性声明为字符串而不是像

那样的datetime

public string CompletionDate {get;set;}

在我的控制器中保存/显示时以及加载时正在转换和保存/显示

convert.ToDateTime("2014-06-03").tostring("dd/MM/yyyy"); //这有时会起作用而且不会在某个时候发生转换问题。我可以冒险，我不能依靠这个。所以我正在寻找不同的可行方法。

我的cshtml：

 <input  type="text" data-bind="value:$data.CompletionDate  />

这里的数据绑定我得到了＃2014; 2014-06-03T00：00：00＆＃34;相反，我需要得到＆＃34; 2014-06-03＆＃34; 。任何解决方法都表示赞赏。

PS：当我选择日期时，我将datepicker附加到文本框我只得到日期。从DB

加载我的页面数据时出现问题

Answer 1

您可以编写自定义功能，以所需格式转换日期。

  function formatDate(date) {
    var d = new Date(date || Date.now()),
    month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

   return [year, month,day ].join('-');
 }
 console.log(formatDate('2014-06-03T00:00:00'));

此功能可以直接在绑定内部调用。

    <input  type="text" data-bind="value:formatDate($data.CompletionDate())"  />

Fiddle Demo

自定义绑定

  ko.bindingHandlers.datetime = {
   update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
     var value = valueAccessor();
     var newValueAccessor = ko.utils.unwrapObservable(value);
     var d = new Date(newValueAccessor);
     if (newValueAccessor != null) {
         var month = '' + (d.getMonth() + 1),
             day = '' + d.getDate(),
             year = d.getFullYear();

         if (month.length < 2) month = '0' + month;
         if (day.length < 2) day = '0' + day;
         $(element).text([year, month, day].join('-'));
     }else{
     console.log("invalid date format");
     }
  }
};

Answer 2

我遇到了类似的问题，并使用此自定义绑定格式化显示日期：

ko.bindingHandlers.formatDate = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        var newValueAccessor = ko.unwrap(value);
        var dt = new Date(newValueAccessor);
        if (newValueAccessor != null)
            $(element).text(dt.toLocaleDateString());
    }
};

要将其与cshtml一起使用，只需在绑定时指定自定义绑定的名称即可。

而不是进行常规文本绑定：

<div data-bind="text: yourDate"></div>

您可以指定自定义绑定的名称：

<div data-bind="formatDate: yourDate"></div>

这是一个演示这一点的小提琴：http://jsfiddle.net/wrathchild77/JwRV7/

要绑定到value元素，自定义绑定稍有不同，因为您必须更新元素的val（）属性而不是text属性。这是一个小提琴，演示了这一点：http://jsfiddle.net/wrathchild77/JwRV7/4/

以下是您要求的日期格式的格式代码：

/Custom Binding to the value of the element
              ko.bindingHandlers.formatDateValue = {
                  update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                      var value = valueAccessor();
                      var newValueAccessor = ko.unwrap(value);
                      var dt = new Date(newValueAccessor);
                      if (newValueAccessor !== null) $(element).val(dt.getFullYear() + '-' + ("0" + (dt.getMonth() + 1)).slice(-2) + '-' + ("0" + dt.getDate()).slice(-2));
                  }
              };

Answer 3

使用moment.js只返回它是一个DateTime并按如下方式应用它：

<input  type="text" data-bind="value: moment($data.CompletionDate).format('YYYY-MM-DD')"  />

Reference

修改

观察你想要一个只有淘汰赛的方法考虑以下几点：

<input  type="text" data-bind="datetime: $data.CompletionDate, pattern: 'yyyy-mm-dd'"  />
//paste this gist somewhere prior (forgot i had the toStringFormat extension: https://gist.github.com/wbennett/707f9def34513ba7a31a)
//but its the same idea
<script>
   ko.bindingHandlers.datetime = {
    update: function(el, value, bindings, model) {
       var unwrapped = ko.utils.unwrapObservable(value());
       var pattern = bindings.pattern || 'yyyy-mm-dd';
       $(el).text(unwrapped.toStringFormat(pattern));
    }
   }
</script>

Creating custom bindings（来自knockoutjs.com）

Fiddle

Knockout.JS中的日期时间？

3 个答案: