JSFiddle - React, Tailwind, and code Playground

by r3pek

HTML

<script src="https://datejs.googlecode.com/svn/trunk/build/date-pt-PT.js"></script>
<p>Cálculo de dias úteis de férias</p>
<br/>
<div class="interval-selection"></div>
<br/>
<button id="calculate">Calcular</button>
<button id="reset">Limpar</button>

CSS

.interval-selection p {
    margin-bottom: 10px;
}

.interval-selection input {
    width: 100px;
}

.interval-selection img {
    vertical-align: bottom;
}

.interval-selection p .used-holidays:before {
    content: "Feriados usados:";
}

.interval-selection p .used-holidays {
    font-size: 12px;
    margin-top: 5px;
    padding-left: 20px;
}

.interval-selection p .used-holidays p {
    margin-bottom: 0;
}

#totalDays {
    font-size: 20px;
    margin-top: 10px;
}

#nTotalDays {
    font-weight: bold;
}

JavaScript

function addNewInterval() {
    var newLineHTML = $("<p></p>");
    newLineHTML.append("De&nbsp<input type=\"text\"/>&nbspa&nbsp");
    newLineHTML.append("<input type=\"text\"/>&nbsp&nbsp");
    newLineHTML.append("<img src=\"http://www.clker.com/cliparts/t/t/p/m/z/O/add-icon-button-hi.png\" height=\"20xp\"/>");

    // Setup the text fields
    $(newLineHTML).find("input").datepicker({
        dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
        firstDay: 1,
        dateFormat: "dd-mm-yy",
        monthNames: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]
    });

    // Setup the + button
    $(newLineHTML).find("img").click(function () {
        $(this).remove();
        addNewInterval();
    });
    $(newLineHTML).find("img").hover(function () {
        // Mouse in
        $(this).css("cursor", "pointer");
    }, function () {
        // Mouse out
        $(this).css("cursor", "default");
    });

    $(".interval-selection").append(newLineHTML);
}

function calculateNrDays() {
    var totalDays = 0;
    
    $(".interval-selection p").each(function() {
        var startVal = $(this).find("input:first").val();
        var endVal = $(this).find("input:nth-child(2)").val();
        if (startVal == "" || endVal == "")
            return;
        
        var startTime = Date.parse(startVal);;
        var endTime = Date.parse(endVal);
        
        var dayCount = 0;
        var holidayCount = 0;
        var holidaysUsed = new Array();
        do {
            if (startTime.getDay() != 0 && startTime.getDay() != 6) {
                if (holidaysContains(startTime)) {
                    holidaysUsed[holidayCount] = getHolidayByDate(startTime);
                    holidayCount++;
                } else {
                    dayCount++;
                }
            }
            
            startTime = startTime.add(1).day();
        } while...