Date Selectors

by ChrisStanyon

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<label for="dateFrom">Date from:</label>
<input type="text" id="dateFrom">

<label for="dateTo">Date to:</label>
<input type="text" id="dateTo">

CSS

label { margin-bottom: 5px; display: block;  }
input { margin-bottom: 10px; }

JavaScript

$(document).ready(function() {
	$('#dateTo').datepicker({
		dateFormat: 'd MM yy'
	});

	$('#dateFrom').datepicker({
    dateFormat: 'd MM yy',
    onSelect: function() {
      //Get the selected data
      var selectedDate = $(this).datepicker('getDate');
      // Add 10 days to it
      selectedDate.setDate(selectedDate.getDate() + 10);
      // Set the DateTo Date
      $('#dateTo').datepicker('setDate', selectedDate);
    }
  });
});