JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<form name="frm1" id="frm1">
    <input name="checkout" id="checkout"/>
    <select name="duration" id="duration"></select>
    <br/><br/>
    <input type="submit"/>
</form>

JavaScript

var selectedDate = new Date();
				$( "#checkout" ).datepicker({
					dateFormat: 'yy-mm-dd',
					defaultDate: "+1w",
					changeMonth: false,
					numberOfMonths: 1,
					showOn: 'button',
					buttonText: '<i class="calendar"></i>',					
					prevText: '<i class="chevron-left"></i>',
					nextText: '<i class="chevron-right"></i>',			
				});
				$("#checkout").datepicker("option", "minDate", selectedDate);


$('#checkout').datepicker().bind("change", function () {
    calculate();
});

function calculate() {
    var d1 = new Date();
    var d2 = $('#checkout').datepicker('getDate');
    var diff = 1;
    if (d1 && d2) {
        diff = diff + Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day

        var sel = document.getElementById('duration');
        sel.innerHTML = ""; // clear
        for(var i = 0; i < diff; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = (i+1) + ' day' + (i>0?'s':'');
            opt.value = i+1;
            sel.appendChild(opt);
        }
    }
}

$('#frm1').on('submit', function(e){
    e.preventDefault();
    alert($('#frm1').serialize());
});