Элемент даты Knockout.js

По моему мнению, я хочу отобразить поле knockout.js binded, которое содержит дату. Это поле отображения, а не поле ввода. Что-то вроде ниже, когда basemodel.actionDate = ko.observable()

<p class="display-field" data-bind="text: baseModel.actionDate"/>

Однако это отображается следующим образом:

2013-06-17T11:56:18.4537687Z

Какой самый простой способ форматировать этот dd mm yyyy. например: 17 June 2013?

Ответ 1

Я рекомендую moment.js библиотеку форматирования даты.

Используя его, вы можете сделать что-то вроде этого в своем представлении:

<p class="display-field" data-bind="text: moment(baseModel.actionDate()).format('LL')"/>

Ответ 2

Либо убедитесь, что служба выводит его в правильном формате, либо формат на стороне клиента

Если вы хотите сделать это на стороне клиента, вы можете проанализировать строку даты ISO в объекте Date, а затем использовать jQuery для ее форматирования в желаемый формат.

Я использую KO-расширения для этого

http://jsfiddle.net/vRf5B/42/

ko.extenders.date = function(target, format) {
    return ko.computed({
        read: function() {
            var value = target();
            if(typeof value === "string") {
                value = new Date(value);                
            }

            format = typeof format === "string" ? format: undefined;
            value = Globalize.format(value, format);

            return value;        
        },
        write: target
    });
}

Обновление

У меня возник вопрос о моем блоге, как получить исходное значение даты Это можно сделать, показывая исходное значение на вычисленном как

http://jsfiddle.net/vRf5B/91/

Ответ 3

У меня были некоторые проблемы (я думаю) с плагином для сопоставления, пытающимся использовать расширитель. Поскольку я показываю только даты и не разрешаю их редактировать, я предпочитаю просто использовать обработчик привязки следующим образом:

Shipped on <span data-bind="date: shipDt"></span>

Здесь обработчик:

    ko.bindingHandlers.date =
    {
        update: function (element, valueAccessor: () => any, allBindingsAccessor: any)
        {
            return ko.bindingHandlers.text.update(element, function ()
            {
                var value: any = ko.utils.unwrapObservable(valueAccessor());

                if (value == null)
                {
                    return null;
                }

                if (typeof value === "string")
                {
                    value = new Date(value);
                }

                return value.toShortDateString();

            }, allBindingsAccessor, null, null);
        }
    };

Я решил добавить прототип к объекту Date, подобному этому (и вызвать toShortDateString в объекте Date, созданном в обработчике), но вы можете заменить вышеприведенную логику на Globalize или что вы предпочитаете.

Date.prototype.toShortDateString = function ()
{
    return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
};

Ответ 4

Если вы ссылаетесь на moment.js, тогда я бы форматировал в модели нокаута.

var BiographicViewModel = function (person) {
    this.FirstName = ko.observable(person.first_name);
    this.LastName = ko.observable(person.last_name);
    this.DOB = ko.observable(moment(person.birth_date).format("MM/DD/YYYY"));
    this.Gender = ko.observable(person.gender);
    this.Country = ko.observable(person.country);
    this.City = ko.observable(person.city);        
};