JSFiddle - React, Tailwind, and code Playground

by lankarden

HTML

<input id="from" type="text"/><br/>
<input id="to" type="text"/><br/>
<input id="alternatefield" type="text" disabled/>

CSS

/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit...

JavaScript

$(function() {
    $("#to").datepicker();
    var dates = $("#from").datepicker({
        defaultDate: new Date(2012, 7 - 1, 1),
        minDate: new Date(2012, 7 - 1, 1),
        maxDate: new Date(2012, 8 - 1, 25),
        changeMonth: false,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            var instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);

            date = DateAdd('d', date, 6);
            $("#to").datepicker("option", "minDate", date);
            $("#to").datepicker("option", "maxDate", date);
            $("#to").datepicker("setDate", date);
        },
        beforeShowDay: $.datepicker.noWeekends,
        altField: '#alternatefield',
        altFormat: 'DD'

    });
    //$('#to').attr('disabled', 'disabled');
});

function DateAdd(ItemType, DateToWorkOn, ValueToBeAdded) {
    switch (ItemType) {
        //date portion         
    case 'd':
        //add days
        DateToWorkOn.setDate(DateToWorkOn.getDate() + ValueToBeAdded)
        break;
    case 'm':
        //add months
        DateToWorkOn.setMonth(DateToWorkOn.getMonth() + ValueToBeAdded)
        break;
    case 'y':
        //add years
        DateToWorkOn.setYear(DateToWorkOn.getFullYear() + ValueToBeAdded)
        break;
        //time portion         
    case 'h':
        //add days
        DateToWorkOn.setHours(DateToWorkOn.getHours() + ValueToBeAdded)
        break;
    case 'n':
        //add minutes
        DateToWorkOn.setMinutes(DateToWorkOn.getMinutes() + ValueToBeAdded)
        break;
    case 's':
        //add seconds
        DateToWorkOn.setSeconds(DateToWorkOn.getSeconds() + ValueToBeAdded)
        break;
    }
    return DateToWorkOn;
}