How do I set the default date of tomorrow using date picker?
I am making a hotel booking project in which I need to specify two input fields as arrival date and departure date. On the arrival date, I was showing the default date today and the user can click and change the date. this is not a problem for me with the arrival date. But the issue is with the departure date, the same as what I did for the departure date, but its not working and nothing is showing on the departure date. What changes do I need to make here.
The codes are as follows:
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var tomorrow = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: tomorrow,
endDate: end,
autoclose: true,
minDate : "+1"
});
});
$('#datepicker1').datepicker('setDate', '0');
$('#datepicker2').datepicker('setDate', '1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<input id="datepicker1" type="text">
<input id="datepicker2" type="text">
And also I need to hide the previous dates, that is, I need to set active dates only for today, and all other dates until yesterday should be inactive.
Please give me these two solutions to solve my problem.
source to share
You will find a solution here https://jsfiddle.net/7wdw0fr6/1/
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var tomorrow = new Date(date.getFullYear(), date.getMonth(), (date.getDate() + 1));
var end = new Date(date.getFullYear(), date.getMonth(), (date.getDate() + 1));
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
startDate: tomorrow,
endDate: end,
autoclose: true
});
$('#datepicker1').datepicker('setDate', '0');
var datepicker2 = (date.getMonth() + 1) + '/' + (date.getDate() + 1) + '/' + date.getFullYear();
$('#datepicker2').datepicker('setDate', datepicker2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<input id="datepicker1" type="text"/>
<input id="datepicker2" type="text"/ >
Error $ ('# datepicker1'). datepicker ('setDate', '1');
Should be $ ('# datepicker2'). datepicker ('setDate', '1');
source to share