Вот пример для начала и конца DatePicker с помощью Jquery
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function() {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
//add 30 days to selected date
startDate.setDate(startDate.getDate() + 30);
var minDate = $(this).datepicker('getDate');
//minDate of dt2 datepicker = dt1 selected day
dt2.datepicker('setDate', minDate);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
//first day which can be selected in dt2 is selected date in dt1
dt2.datepicker('option', 'minDate', minDate);
//same for dt1
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
});
</script>
</head>
<body>
<form>
<input type="text" id="dt1">
<input type="text" id="dt2">
</form>
</body>
</html>
Там много и много вопросов об этом, если вы выполните поиск, [это] (http://stackoverflow.com/questions/29122275/set-end-date-after-select-start-date), например. Реализация зависит от библиотеки datepicker, которую вы используете, но логика примерно такая же. –