JSFiddle - React, Tailwind, and code Playground

by Donal Devine

HTML

<script src="http://momentjs.com/downloads/moment.js"></script>
<div class="container">
    <div class="heading">
        <div class="col">Date</div>
        <div class="col">Working Days to Add</div>
    </div>
    <div class="table-row">
        <div class="col">
            <input id="theDate" type="text" value="" />
        </div>
        <div class="col">
            <input id="theDay" type="text" value="" />
        </div>
    </div>
    <div class="table-row">
        <div class="col">
            <button type="button" id="calcWorkDays">Add Working Days</button>
        </div>
        <div class="col">
            <div id="theResult"></div>
        </div>
    </div>
</div>

CSS

.container {

    display:table;

    width:90%;

    border-collapse: collapse;

}

.heading {

    font-weight: bold;

    display:table-row;

    background-color:#C91622;

    text-align: center;

    line-height: 25px;

    font-size: 14px;

    font-family:georgia;

    color:#fff;

}

.table-row {

    display:table-row;

    text-align: center;

}

.col {

    display:table-cell;

    border: 1px solid #CCC;

}

JavaScript

var now = moment();

function addWeekdays(date, days) {
    date = moment(date); // clone
    while (days > 0) {
        date = date.add(1, 'days');
        // decrease "days" only if it's a weekday.
        if (date.isoWeekday() !== 6 && date.isoWeekday() !== 7) {
            days -= 1;
        }
    }
    return date;
}

$(function () {
    $theDate = $('#theDate');
    $theDay = $('#theDay');
    $theResult = $('#theResult');

    $calcWorkDays = $('#calcWorkDays');

    $calcWorkDays.click(function () {
        $theDateValue = $($theDate).val();
        $theDayValue = $($theDay).val();
        $theResult.text(addWeekdays($theDateValue, $theDayValue).format('DD MMM YYYY'));

    });
});