Question

As I dig deeper into the concepts of knockout.js, I’m having difficulties to understand why I can’t tell a ko.observable how to parse/write its value like so:

   dateValue = ko.observable({
        read: function (dateString) {
            /*convert a date string to an object here for internal storage*/
            return Globalize.parseDate(dateString, 'd');
        },
        write: function (dateObj) {
             /*format a date object for output*/
            return Globalize.formatDate(dateObj, 'd');
        }
    })

I’m aware that ko.computed’s exist for this purpose, but they still require me to keep a “shadow” observable where the result of read() needs to be written to.

Answer 1

Write an extender to add a formatted computed observable so you may read or write formatted values while still giving you access to the “raw” unformatted value.

ko.extenders['date'] = function (target, format) {
    var formatted = ko.computed({
        'read': function () {
            return Globalize.parseDate(target(), format);
        },
        'write': function (date) {
            target(Globalize.format(date, format));
        }
    });
    target.formatted = formatted;
    return target;
};

dateValue = ko.observable('10/19/2012').extend({ 'date': 'd' });

// e.g.,
dateValue();           // 10/19/2012
dateValue.formatted(); // Fri Oct 19 2012 00:00:00 GMT-0700 (Pacific Daylight Time)

dateValue.formatted(new Date(2012, 9, 31));

dateValue();           // 10/31/2012
dateValue.formatted(); // Wed Oct 31 2012 00:00:00 GMT-0700 (Pacific Daylight Time)