JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<div>
    <label for="SQL_SFU_PROCEDURE_AYRC">Academic year</label>
    <input type="text" id="SQL_SFU_PROCEDURE_AYRC" value="2015/6" />
</div>
<div>
    <label for="SQL_SFU_PROCEDURE_IMPORT_DATE">Import date</label>
    <input type="text" id="SQL_SFU_PROCEDURE_IMPORT_DATE" value="01-Sep-15" />
</div>
<div>
    <input type="checkbox" id="SQL_SFU_RUN_SCRIPT_1-chk" />
    <label for="SQL_SFU_RUN_SCRIPT_1-chk">Script 1: Update term date</label>
    <input type="hidden" id="SQL_SFU_RUN_SCRIPT_1" value="04-MAR-15"/>
</div>
<div>
    <input type="checkbox" id="SQL_SFU_RUN_SCRIPT_2-chk" />
    <label for="SQL_SFU_RUN_SCRIPT_2-chk">Script 2: Copy changed SFU records</label>
    <input type="hidden" id="SQL_SFU_RUN_SCRIPT_2" value="21-AUG-15"/>
</div>
<div>
    <input type="checkbox" id="SQL_SFU_RUN_SCRIPT_3-chk" />
    <label for="SQL_SFU_RUN_SCRIPT_3-chk">Script 3: SCJ matching</label>
    <input type="hidden" id="SQL_SFU_RUN_SCRIPT_3" value="21-AUG-15"/>
</div>
<div>
    <input type="checkbox" id="SQL_SFU_RUN_SCRIPT_4-chk" />
    <label for="SQL_SFU_RUN_SCRIPT_4-chk">Script 4: ASX script</label>
    <input type="hidden" id="SQL_SFU_RUN_SCRIPT_4" value="21-AUG-15"/>
</div>
<div>
    <input type="checkbox" id="SQL_SFU_RUN_SCRIPT_5-chk" />
    <label for="SQL_SFU_RUN_SCRIPT_5-chk">Script 5: wrong course/year script</label>
    <input type="hidden" id="SQL_SFU_RUN_SCRIPT_5" value="21-AUG-15"/>
</div>
<div>
    <input type="checkbox" id="SQL_SFU_RUN_SCRIPT_6-chk" />
    <label for="SQL_SFU_RUN_SCRIPT_6-chk">Script 6: wrong fee script</label>
    <input type="hidden" id="SQL_SFU_RUN_SCRIPT_6" value="21-AUG-15"/>
</div>

JavaScript

// Uses jQueryUI's datepicker widget both to display a datepicker on the import date box,
// and to simplify formatting the date on the hidden fields
(function ($) {
    var tomorrow = new Date((new Date()).getTime() + 86400000);
    $("#SQL_SFU_PROCEDURE_IMPORT_DATE,input[type=hidden]").datepicker({
        dateFormat : "dd-M-y"
    });
    $("input[type=checkbox]").on("change", function (event) {
        var hidden = $(event.currentTarget).parent().children("input[type=hidden]");
        if ($(event.currentTarget).prop("checked")) {
            hidden.datepicker("setDate", tomorrow);
            return;
        }
        if (datesEqual(hidden.datepicker("getDate"), tomorrow)) {
            hidden.datepicker("setDate", new Date(0));
        }
    }).each(function (index, element) {
        var hidden = $(element).parent().children("input[type=hidden]");
        if (datesEqual(hidden.datepicker("getDate"), tomorrow)) {
            $(element).prop("checked", true);
        }
    });
    function datesEqual(d1, d2) {
        return (new Date(d1)).toISOString().substr(0, 10) ===
            (new Date(d2)).toISOString().substr(0, 10);
    }
}(jQuery));