Start/End Date Ranges Based on Dropdown Option Selected
Based on the selected option, the date range will either be a date range of 30 days or any future date.
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<input type="text" id="datepicker1">
<input type="text" id="datepicker2">
JavaScript
var timestamp = new Date().getTime() - (30 * 24 * 60 * 60 * 1000);
$("#datepicker1").datepicker({
dateFormat: "dd-M-yy",
maxDate: 0,
onSelect: function (date) {
var date1 = $(this).datepicker('getDate');
var date2 = $(this).datepicker('getDate');
date1.setDate(date1.getDate() + 30);
$('#datepicker2').datepicker('option', 'minDate', date2);
$('#datepicker2').datepicker('option', 'maxDate', date1);
}
});
$('#datepicker2').datepicker({
dateFormat: "dd-M-yy",
maxDate: 0,
onSelect: function (date) {
var date1 = $(this).datepicker('getDate');
var date2 = $(this).datepicker('getDate');
date1.setDate(date1.getDate() - 30);
$('#datepicker1').datepicker('option', 'minDate', date1);
$('#datepicker1').datepicker('option', 'maxDate', date2);
}
});