Demo of default date and set date for Calendars using JQuery

One default date is there for the first calendar, on selection of any date from first calendar the same date is set for the second calendar by using change event. Similarly on selection of any date from 2nd calendar , date can be set for 1st calendar by using change event.

HTML

 Date: Default = 14th May 2018 <br> <input type="text" id="date_picker1" size=9 class='form-control'></div>
<div class="col-md-3">SetDate: Set a Date <br> <input type="text" id="date_picker2" size=9 class='form-control'>

JQuery

<script>
$(document).ready(function() {
///////
$( "#date_picker1" ).datepicker({
dateFormat: 'dd-mm-yy',
defaultDate:"14-05-2018" 
})
///////
///////
 $( "#date_picker2" ).datepicker({
dateFormat: 'dd-mm-yy'
});
///////
$('#date_picker1').change(function() {
var var_setDate = $(this).datepicker('getDate');
$("#date_picker2").datepicker("setDate",var_setDate );
})
///////
$('#date_picker2').change(function() {
var var_setDate = $(this).datepicker('getDate');
$("#date_picker1").datepicker("setDate",var_setDate );
})
////////////////
})
</script>