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

10 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. google api maps

    Hello there! I know this is somewhat off topic but I was wondering which blog platform are you using for this website?

    I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at options for
    another platform. I would be fantastic if you could point me in the direction of
    a good platform.

  7. Jamal

    I read a lot of interesting articles here. Probably you spend a lot of time writing, i know
    how to save you a lot of time, there is an online tool that creates unique, SEO friendly articles in minutes, just type
    in google – laranitas free content source

  8. honest Neuropathy miracle review

    For any part of our anatomy to be in pain, it must be: an area susceptible to injury exposed to pain-causing stimuli
    and connected to a nerve supply. It is believed that some 25
    percent of hospitalized individuals are protein deficient.
    Exercise and Diet For people with diabetes and
    neuropathy, these things ‘ exercise and diet ‘ are actually overrated.

Leave a Reply

  • (will not be published)