jQuery UI Date manipulation

For SO question#38157608

by Louys Patrice Bessette

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="form_container">

	<form id="form_1140107" class="appnitro" method="post" action="">
		<br>
		<span style="float:right;"><a href="logout.php" ><input type="button" value="Logout"></a></span>
		<div class="form_description">
			<center><h2><a>Welcome</a></h2></center>
			<br>
			<center></center> 
		</div>	

		<ul >
			<li id="li_3" >
				<label class="description" for="element_3">Customer Id</label>
				<div>
					<input id="element_3" name="client" class="element text medium" type="text" maxlength="255" value="<?php echo(rand(10,100));?>">
				</div> 
			</li>				

			<li id="li_1" >
				<label class="description" for="element_1">Joining Date:</label>
				<div>
					<input type="text" name="date" id="datepicker">
				</div> 
			</li>
			<li id="li_1" >
				<label class="description" for="element_1">Next Renewal Date:</label>
				<div>
					<input type="text" name="date" id="datepicker2">
				</div> 
			</li>
			<li id="li_1" >
				<label class="description" for="element_1">Reminder Date:</label>
				<div>
					<input type="text" name="date" id="datepicker3">
				</div> 
			</li>

			<li id="li_3" >
				<label class="description" for="element_3">Customer Name:</label>
				<div>
					<input id="element_3" name="client" class="element text medium" type="text" maxlength="255" value="">
				</div> 
			</li>	
			<li id="li_3" >
				<label class="description" for="element_3">Mobile No:</label>
				<div>
					<input id="element_3" name="client_name" class="element text medium" type="text" maxlength="255" value="">
				</div> 
			</li>	
			<li id="li_4" >
				<label class="description" for="element_4">Email:</label>

				<div>
					<input id="element_4_1" name="address" class="element text large" value=""...

JavaScript

$("#datepicker3").datepicker({dateFormat: "mm/dd/yy",});
$("#datepicker2").datepicker({dateFormat: "mm/dd/yy",});

function pad(s) { return (s < 10) ? '0' + s : s; }

$("#datepicker").datepicker({
	dateFormat: "mm/dd/yy",
  onSelect: function(dateText, instance) {
		d2 = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
		d2.setDate(d2.getDate() - 1);
    d2.setFullYear(d2.getFullYear() + 1);
    //alert(date2);
    
    d3 = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
		d3.setDate(d3.getDate() - 15);
    d3.setFullYear(d3.getFullYear() + 1);
    //alert(date2);
    
    date2 = [pad(d2.getMonth()+1), pad(d2.getDate()), d2.getFullYear()].join('/');
    date3 = [pad(d3.getMonth()+1), pad(d3.getDate()), d3.getFullYear()].join('/');
		//alert (date2);

		$("#datepicker2").datepicker("setDate", date2);
    $("#datepicker3").datepicker("setDate", date3);
	}
});

/*
Inpired of these two SO answers:

http://stackoverflow.com/a/11139802/2159528
http://stackoverflow.com/a/13459946/2159528

*/