JSFiddle - React, Tailwind, and code Playground

by Mike Cunneen

HTML

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://rawgithub.com/bunkat/later/master/later.js"></script>
<div>Frequency
    <select id="ddRepeatFrequency" style="width: 170px;" onchange="RecurringChanged();">
        <option value="Week">Week (working)</option>
        <option value="Two Weeks">Two Weeks (NOT working)</option>
        <option value="Month" selected="selected">Month (working)</option>
        <option value="Two Months">Two Months (NOT working)</option>
        <option value="Quarter">Quarter (NOT working)</option>
    </select>
</div>
<div>Repeat Times
    <input id="repeattimes" type="number" value="12" onchange="RecurringChanged();" />
</div>
<div>Start Date Example 1
    <input id="repeatstartdate1" onchange="RecurringChanged();" />
</div>
<div>Start Date Example (at end of month)
    <input id="repeatstartdate2" onchange="RecurringChanged();" />
</div>
<div>
    <div id="spanerr"></div>
</div>
<hr>
 <h3>Results</h3>

<table>
    <tr>
        <th>
            <div id="divHeader1"></div>
        </th>
        <th>
            <div id="divHeader2"></div>
        </th>
    </tr>
    <tr>
        <td>
            <div id="divResults1">Answer Goes Here</div>
        </td>
        <td>
            <div id="divResults2">Answer Goes Here</div>
        </td>
    </tr>
</table>

CSS

body {
    background-color: #6699BB;
    color:white;
    font-family:"Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Trebuchet";
}
input, select, option {
    font-size: 1.2em;
}

JavaScript

$(document).ready(function () {
    var dt1 = "12/04/2013";
    var dt2 = "12/29/2013";
    $("#repeatstartdate1").val(dt1);
    $("#repeatstartdate2").val(dt2);
    RecurringChanged();
});

function RecurringChanged() {
    var freq = $("#ddRepeatFrequency").find(":selected").val();
    var repeattimes = $("#repeattimes").val();
    var startdate1 = $("#repeatstartdate1").val();
    var startdate2 = $("#repeatstartdate2").val();

    var results1 = DateRepeater(freq, repeattimes, startdate1);
    var results2 = DateRepeater(freq, repeattimes, startdate2);
    $("#divHeader1").html(startdate1);
    $("#divResults1").html(results1);
    $("#divHeader2").html(startdate2);
    $("#divResults2").html(results2);
}

function DateRepeater(frequency, repeattimes, sdate) {

    later.date.localTime();
    var startdate = new Date(sdate);
    var isEndOfMonth = (startdate.getDate() >= 28);
    var sched;
    var _dayOfTheMonth = startdate.getDate();
    var _dayOfTheWeek = later.dayOfWeek.val(startdate);
    var _monthval = later.month.val(startdate);

    switch (frequency) {
        case "Week":
            //This should return 7 days from date no matter if it crosses months or not - COMPLETE
            sched = later.parse.recur().on(_dayOfTheWeek).dayOfWeek();
            break;
        case "Two Weeks":
            //This should return 14 days/2 weeks from date no matter if it crosses months or not - NOT COMPLETE
            sched = later.parse.recur().on(_dayOfTheWeek).dayOfWeek(); //HELP NEEDED HERE
            break;
        case "Month":
            //This should return next month on same day - if  >=28 days then assume last day of month  - COMPLETE
            if (isEndOfMonth) sched = later.parse.recur().last().dayOfMonth();
            else sched = later.parse.recur().on(_dayOfTheMonth).dayOfMonth();
            break;
        case "Two Months":
            //This should return 2 months from date on same day - if  >=28 days then assume last day of month  - NOT...