How to set tomorrow's date as default using date picker?

Question

I am doing a hotel booking project in which i need to give two input fields as arrival date and departure date, In arrival date i have displayed today's date as default and user can able to click over and can change date.So there is no issue for me with arrival date. But issue is with the departure date, the same thing i have done for departure date but its not working and nothing displayed inside departure date. What changes should i need to make here.

The codes 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 i.e., i need to set active dates from today only and all the rest of dates up to yesterday needs to be inactive state.

Kindly give me these two solutions to solve my issue.

Answer 1

Here you go with the solution 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"/ >

Mistake $('#datepicker1').datepicker('setDate', '1');

Should be $('#datepicker2').datepicker('setDate', '1');