Posted by & filed under Development, Web Development.

I am working on a couple of Silverlight projects using Microsoft Prism and found the MVVM pattern very powerful. The team at work is developing a single page HTML/Javascript application that is using Knockout as the MVVM framework. I wanted to bind a date using a custom format ‘dddd, MMMM dd, yyyy’. Since JavaScript doesn’t have great support for formatting dates I pulled in Date.js.

I am familiar with using IValueConverter in Silverlight to convert values during binding. I was really happy to find a the custom binding feature in Knockout called ‘bindingHandlers‘. I was able to write a quick bindingHandler to format the date using date.js.

Checkout the Demo

Here is the custom binding for formatting dates using date.js:

ko.bindingHandlers.dateString = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(),
            allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        var pattern = allBindings.datePattern || 'MM/dd/yyyy';
        $(element).text(valueUnwrapped.toString(pattern));
    }
}

Here is the binding in page:

Thursday, April 05, 2012
0.00

7 Responses to “Formatting Dates with Knockout.js”

  1. Kijana Woodard

    Thank you. You got me though this with ease.

    One thing I had to do was loop through my MVC written data and convert my date values with “new Date” before ko.mapping. I also told json.net to serialize in ISO format.

  2. R Walter

    Thank you so much for this. In case anyone is interested, I got this to work with moment.js (an alternative Javascript date library) like this. Note that my system leaves out the formatting function and uses the default calendar() format from moment.js.

    ko.bindingHandlers.dateString = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    var value = valueAccessor();
    var valueUnwrapped = ko.utils.unwrapObservable(value);
    if(valueUnwrapped) {
    $(element).text(moment(valueUnwrapped).calendar());
    }
    }
    }

  3. B Ernesto

    @R Walter, thanks for the lead on Moment.js. That is one awesome date library.

  4. CodeRob

    Love the article! Worked like a charm, and made custom bindings in knockout very simple to understand. Thanks!

  5. John Cutburth

    Very nice,
    I liked the moment.js lib but I wanted to keep the formatting here is what I came up with.

    ko.bindingHandlers.dateString = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    var value = valueAccessor(),
    allBindings = allBindingsAccessor();
    var valueUnwrapped = ko.utils.unwrapObservable(value);
    var pattern = allBindings.datePattern || ‘MM/DD/YYYY’;
    $(element).text(moment(valueUnwrapped).format(pattern));
    }
    }

Leave a Reply

  • (will not be published)