CODEWITHSUNDEEP
javascriptknockout.js
Developer
Developer

Reputation: 8646

Date format in knock out js

Hi all I have formatted the date in knock out js as follow using moment.js

<div data-bind="text: moment(formatDate).format('DD-MMM-YY')"></div>

but when date is null it is displaying as invalid date how can I show empty text here instead of invalid date

Upvotes: 1

Views: 1016

Answers (1)

sroes
sroes

Reputation: 15053

You could use an expression within text:

<div data-bind="
    text: ko.unwrap(formatDate) ? moment(formatDate).format('DD-MMM-YY') : ''
"></div>

Or use an extender:

ko.extenders.formatDate = function(target, format) {
    var result = ko.computed({
        read: target,
        write: function(newValue) {
            var current = target(),
                valueToWrite = !newValue || isNaN(newValue) ? '' : moment(newValue).format(format);

            // only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    }).extend({notify: 'always'});

    result(target());

    return result;
};

Then use it like this:

var someDateObservable = ko.observable();
var someDateObservableFormatted = someDateObservable.extend({
    formatDate: 'DD-MMM-YY'
});

Upvotes: 3

Related Questions