JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css">
<script id="customMessageTemplate" type="text/html">
    < em class = "customMessage"
    data - bind = 'validationMessage: field' > < /em>
</script>
<fieldset>
    <label>Age:
        <input data-bind='value: age' required/>
    </label>
    <label>Date:
        <input data-bind='datepicker: date' required/>
    </label>
    </div>
</fieldset>
<button type="button" data-bind='click: submit'>Submit</button>

CSS

label {
    display: block;
}
.validationMessage {
    color: Red;
}
.customMessage {
    color: Orange;
}

JavaScript

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {        
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || { format: 'dd/mm/yyyy', autoclose: true };
        $(element).datepicker(options);
       
        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "changeDate", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }
        });
        
        ko.utils.registerEventHandler(element, "change", function () {
            var widget = $(element).data("datepicker");
            
            var value = valueAccessor();            
            if (ko.isObservable(value)) {
                if (element.value) {
                    var date = widget.getUTCDate();                                        
                    value(date);
                } else {                    
                    value(null);
                }

            }
        });
    },
    update: function (element, valueAccessor) {
            
        var widget = $(element).data("datepicker");

        //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());

            if (!widget.date) {
                return;
            }

            if (_.isString(widget.date)) {
                widget.setDate(moment(widget.date).toDate());
                return;
            }

            widget.setValue();
        }        
    }
};


    var init = ko.bindingHandlers['datepicker'].init;    
    ko.bindingHandlers['datepicker'].init = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        init(element, valueAccessor, allBindingsAccessor);
        return...