JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css">
A configured date.
<br />
<input type='text' value='' id='date_start' />
<input type='button' id='go' value='update' />
<p>This input should reflect the <b>selected</b> date.<br />
<input type='text' value='' class='DateInput' /></p>
<p>This input should reflect the <b>selected</b> date + 3months (my proposal for jqueryUi).<br />
<input type='text' value='' class='DateInput' id='setDate2' /></p>
<p>This input shows jqueryUi's current status - ONLY using todays date.<br />
<input type='text' value='' class='DateInput' id='setDate1' /></p>
<p>This input is what I believe it should do. Use "today" because it was null'd first or had no input value<br />
<input type='text' value='' class='DateInput' id='setDate3' /></p>
JavaScript
$("#date_start, .DateInput").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true
});
//Set the start values
$("#date_start").datepicker("setDate", "10/08/2013");
//Prevent User change input box
$("#date_start, #DateInput").keydown(function (e) {
e.preventDefault();
});
$('#go').click(function () {
//var startDate = $('#date_start').val();
var startDate = $('#date_start').datepicker("getDate");
//Set ALL the inputs to be that of the first.
$(".DateInput").datepicker("setDate", startDate);
//Set the third input to be now +3months using jqueryUI function
$("#setDate1").datepicker("setDate", "+3m");
//Set what I expect it to output
startDate.setMonth(startDate.getMonth() + 3);
$("#setDate2").datepicker("setDate", startDate);
//Set the last input to use null first. (my proposal for the widget improvement)
$("#setDate3").datepicker("setDate", null);
$("#setDate3").datepicker("setDate", "+3m");
});