JSFiddle - React, Tailwind, and code Playground

by ernestohs

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/andrewplummer/Sugar/master/lib/sugar.js"></script>
<table width="96%" cellspacing="0" cellpadding="0" border="0" style="margin-left: 2%">
    <tbody>
        <tr>
            <td valign="top" align="right" style="padding-right: 5px; width: 121px; height: 30px;                        padding-top: 10px;">
                <input type="checkbox" id="enablerSchedule" data-bind="checked: enable, enable:editable" />
                &nbsp;Enable schedule                    </td>
            <td valign="middle" style="height: 30px;">
                <hr align="left" style="width: 320px; height: 1px; color: #dddddd; margin-bottom: 2px;">
            </td>
        </tr>
        <tr>
            <td align="right" style="padding-right: 5px; width: 121px">
                Start time:                    </td>
            <td style="height: 28px">
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <input readonly="readonly" style="width: 65px;" maxlength="50" id="startTime" data-bind="value: starDate, enable: enableDateTime">
                            </td>
                            <td>
                                <select style="margin-left: 10px; width: 78px;" class="dropDownText" id="time" data-bind="value: starTime, enable: enableDateTime">
                                </select>
                            </td>
                            <td style="margin-left: 5px">
                                &nbsp;                                </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td align="right" style="padding-right: 5px; width:...

JavaScript

var EditMode = true;

var schedulerviewModel = {
    editable: ko.observable(EditMode),
    enable: ko.observable(true),
    starDate: ko.observable(Date.create().format('{dd}/{MM}/{yyyy}')),
    starTime: ko.observable(''),
    repeatEnable: ko.observable(true),
    every: ko.observable('1'),
    selected: ko.observable('until'),
    times: ko.observable('1'),
    until: ko.observable(Date.create().format('{dd}/{MM}/{yyyy}'))
};

schedulerviewModel.enableDateTime = ko.dependentObservable({
    read: function() {
        return schedulerviewModel.enable() && schedulerviewModel.editable();
    }
}, schedulerviewModel);

schedulerviewModel.enableEvery = ko.dependentObservable({
    read: function() {
        return schedulerviewModel.enable() && schedulerviewModel.editable();
    }
}, schedulerviewModel);

schedulerviewModel.repeatEnableGroup = ko.dependentObservable({
    read: function() {
        return schedulerviewModel.enable() && schedulerviewModel.repeatEnable() && schedulerviewModel.editable();
    }
}, schedulerviewModel);

schedulerviewModel.repeatEveryEnable = ko.dependentObservable({
    read: function() {
        return schedulerviewModel.enable() && schedulerviewModel.repeatEnable() && schedulerviewModel.editable();
    }
}, schedulerviewModel);

schedulerviewModel.numberTimesEnable = ko.dependentObservable({
    read: function() {
        return schedulerviewModel.enable() && schedulerviewModel.selected() === 'times' && schedulerviewModel.editable();
    }
}, schedulerviewModel);

schedulerviewModel.untilEnable = ko.dependentObservable({
    read: function() {
        return schedulerviewModel.enable() && schedulerviewModel.selected() === 'until' && schedulerviewModel.editable();
    }
}, schedulerviewModel);

$('input[name="groupRepeat"]').click(function(event) {
    if ($(this).val() === schedulerviewModel.selected()) {
        schedulerviewModel.selected(null);
    }
});

ko.applyBindings(schedulerviewModel);