JSFiddle - React, Tailwind, and code Playground

by mcannon

HTML

<input type="text" id="StartDateText" data-bind="date: StartDate" />
<input type="text" id="date1" data-bind="value: myDate" />

JavaScript

ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        try {
            var jsonDate = ko.utils.unwrapObservable(valueAccessor());
            var value = parseJsonDateString(jsonDate);
            var strDate = value.getMonth() + 1 + "/"
                            + value.getDate() + "/" 
                            + value.getFullYear();
            element.setAttribute('value', strDate);
        }
        catch (exc) {
        }
        $(element).change(function () {
            var value = valueAccessor();
            value(element.getAttribute('value'));
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var val = valueAccessor();
        val(element.getAttribute('value'));
    }
};
//The parseJsonDateString function can be defined using a regular expression.

var jsonDateRE = /^\/Date\((-?\d+)(\+|-)?(\d+)?\)\/$/;
var parseJsonDateString = function (value) {
    var arr = value && jsonDateRE.exec(value);
    if (arr) {
        return new Date(parseInt(arr[1]));
    }
    return value;
};

var viewModel = {
    StartDate: ko.observable("1366656597"),
    myDate: ko.observable(new Date("09/01/2011")),
    setToCurrentDate: function() {
        this.myDate(new Date());
    }
};

ko.applyBindings(viewModel);