How to add a day with checkOut when change check in
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<script>
$(function() {
let $checkIn = $('#datetimepicker1');
let $checkOut = $('#datetimepicker2');
$checkIn.datetimepicker({
useCurrent: false,
format: 'YYYY-MM-DD',
minDate: moment()
});
$checkOut.datetimepicker({
useCurrent: false,
format: 'YYYY-MM-DD',
});
$checkIn.on("dp.change", function(e) {
//Here we add a day more to the Check-out
$checkOut.data("DateTimePicker").minDate(e.date.add(1, 'day'));
});
$checkOut.on("dp.change", function(e) {
$checkIn.data("DateTimePicker").maxDate(e.date);
});
});
</script>
<div class="form-group col-md-2">
<label for="checkin">Check-in</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" id="from_date" name="checkin" />
<span class="input-group-addon"><span class="glyphicon-calendar glyphicon">
</span></span>
</div>
</div>
<div class="form-group col-md-2">
<label for="checkout">Check-out</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" id="to_date" name="checkout" />
<span class="input-group-addon"><span class="glyphicon-calendar glyphicon">
</span></span>
</div>
</div>
</body>
</html>
No comments