Knockout.js format date item

Question

In my view I wish to display a knockout.js binded field that contains a date. It is just a display field and not an input field. Something like below when basemodel.actionDate = ko.observable()

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

However this is displayed as follows:

2013-06-17T11:56:18.4537687Z

What is the easiest way to format this dd mm yyyy. eg: 17 June 2013?

Answer 1

If you are referencing moment.js then I would actually format in the knockout model.

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);        
};

Answer 2

I had some issues (I think) with the mapping plugin trying to use the extender. Since I'm only displaying dates and not allowing them to be edited I prefer to just use a binding handler like this:

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

Here's the handler:

    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);
        }
    };

I chose to add a prototype to Date object like this (and call toShortDateString on the Date object created in the handler)- but you can replace the logic above with Globalize or whatever you prefer.

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

Answer 3

Either make sure the service output it in a correct format, or format in client side

If you want todo it client side then you can parse the ISO date string into a Date object and then use jQuery globalize to format it to desired format.

I use KO extenders for this

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
    });
}

update

I got a question on my blog how to retrieve the raw date value It can be done my exposing the raw value on the computed like

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

Answer 4

Declare format function:

Date.prototype.toFormattedDate = function () {
  var dd = this.getDate();
  if (dd < 10) dd = '0' + dd;
  var mm = this.getMonth() + 1;
  if (mm < 10) mm = '0' + mm;
  var yyyy = this.getFullYear();
  /* change format here */
  return String(mm + "/" + dd + "/" + yyyy);
};

And use it with the date strings as:

<span data-bind="text: new Date(TaxAuthority.RegDate).toFormattedDate()"></span>

Answer 5

I recommend the moment.js date formatting library.

Using it, you can do something like this in your view:

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