datepicker-calendar

datepicker-calendar

by davorpeic

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<select id="fakeMonthSelected"><option value="9" selected="selected"></option></select>
<div class="date-container">
<p>Date checkin: <span class="datefrom-text"></span></p>
<!--<input type="text"  id="datefrom" />-->
<div id="datefrom"></div>
</div>

<div class="date-container">
<p>Date checkout: <span class="dateto-text"></span></p>
<!--<input type="text"  id="dateto" />-->
 <div id="dateto"></div>
</div>

CSS

body{
  color: #fff;
  font-family: Arial;
}
.date-container{
  padding: 10px; 
  margin-left: 20px;
  background-color: #253786;
 
}
input{
  padding: 5px;
}

JavaScript

$('#datefrom').datepicker({
 stepMonths: 1,
 numberOfMonths: 2,
 //showCurrentAtPos: 2,
 minDate : 'today',
 dateFormat: 'yy-mm-dd',
 showOtherMonths: true,
 changeMonth: true,
      changeYear: true,
 onSelect: function(date){
 $('.datefrom-text').text(date);
 	//$('#dateto').datepicker('option', 'minDate', date);
 }
});

$('#dateto').datepicker({
 stepMonths: 1,
 numberOfMonths: 2,
 minDate : 'today',
 //showCurrentAtPos: 1,
 dateFormat: 'yy-mm-dd',
 showOtherMonths: true,
 changeMonth: true,
      changeYear: true,
 //selectOtherMonths: true,
 //showButtonPanel: true,
 onSelect: function(date){
  		$('.dateto-text').text(date);
 }
});

setTimeout(function(){
$.datepicker._selectMonthYear( '#dateto', document.getElementById("fakeMonthSelected"), "M" );
},500);