I have two datepickers one of them is for a start date and the other is for an end date. My problem is when i select a start date ,the end date datepicker should be after this date so that i should lock the other dates and if I select an end date input, the start date input should be after the end date.
HTML:
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label class="control-label col-sm-5" for="date_added">Date
Courrier</label>
<div class="input-group date">
<span class="input-group-addon"><i
class="fa fa-calendar"></i></span><input id="date_added"
type="text" class="form-control" value="03/04/2014">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label class="control-label col-sm-7" for="date_modified">Date
Arrivée</label>
<div class="input-group date">
<span class="input-group-addon"><i
class="fa fa-calendar"></i></span><input id="date_modified"
type="text" class="form-control" value="03/06/2014">
</div>
</div>
</div>
</div>
Javascript:
<script>
$(document).ready(function() {
var start_date=$('#date_added').val();
var end_date=$('#date_modified').val();
$('#date_added').datepicker({
onSelect: function(dateStr) {
start_date=$(this).val();
$('#date_modified').datepicker('option', 'minDate', new Date(start_date));
},
todayBtn : "linked",
keyboardNavigation : false,
forceParse : false,
calendarWeeks : true,
autoclose : true
});
console.log("jjj")
$('#date_modified').datepicker({
onSelect: function(dateStr) {
alert("Date is within two weeks");
end_date=$(this).val();
$('#date_added').datepicker('option', 'minDate', new Date(end_date));
},
todayBtn : "linked",
keyboardNavigation : false,
forceParse : false,
calendarWeeks : true,
autoclose : true
});
});
</script>
So what should I change