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

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

  6. Katja

    Enquanto a mulher está amamentando ela não deve usar orlistat nem nenhuma outra droga pra emagrecer.

  7. Dexter

    Wenn nicht verschreibungspflichtige Medikamente durch einen Mediziner verordnet werden, so zahlen die privaten Anbieter auch diese Medikamente.

  8. Abby

    Nimm dir vor, verarbeitete Lebensmittel wie Brot durch komplexe Kohlenhydrate aus Früchten und Gemüse zu ersetzen.

Leave a Reply

  • (will not be published)