JSFiddle - React, Tailwind, and code Playground

by tanya_22

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<table data-bind='visible: beschikkingen().length > 0'>
            <thead>
                <tr>
                    <th>Beschikkingsdatum</th>
                    <th>Beschikkingsnr</th>
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: beschikkingen'>
                <tr>
                    <td><input name="beschikkingsdatum[]" type="text" class="beschikkingsdatum" value="" data-bind='datepicker: beschikkingsdatum' /> </td>
                    <td><input class='required number' data-bind='value: beschikkingsnummer, uniqueName: true' /></td>
                    <td><a href='#' data-bind='click: $root.removebeschikking'>Delete</a></td>
                </tr>
            </tbody>
</table>

<button data-bind="click: addbeschikking">Add</button>

JavaScript

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
    		console.log(element, valueAccessor(), allBindingsAccessor());
        var options = allBindingsAccessor().datepickerOptions || {};

        console.log("datepicker");                        
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

    }
};


var beschikkingModel = function(beschikkingen) {
    var self = this;
    self.beschikkingen = ko.observableArray(beschikkingen);

    self.addbeschikking = function() {
        self.beschikkingen.push({
            beschikkingsdatum: "",
            beschikkingsnummer: ""
        });
    };

    self.removebeschikking = function(beschikking) {
        self.beschikkingen.remove(beschikking);
    };

    self.save = function(form) {
        alert("Could now transmit to server: " + ko.utils.stringifyJson(self.beschikkingen));
        // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.beschikkingen);
    };
};

var viewModel = new beschikkingModel([
    {
    beschikkingsdatum: "",
    beschikkingsnummer: ""}
]);
ko.applyBindings(viewModel);

/*
$(window).load(function(){
$('.beschikkingsdatum').datepicker({
    dateFormat: 'dd-mm-yy',
    constrainInput: false
});
});
*/