Check In

HTML

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<label for="checkin">Please select Check-In date</label>
<input type="text" class="datepicker" id="checkin" name="checkin" />
<br />
<label for="b_checkin_day">Check-In day</label>
<input type="text" id="b_checkin_day" name="b_checkin_day" readonly />
<br />
<label for="b_checkin_day">Check-In month and year</label>
<input type="text" id="b_checkin_month" name="b_checkin_month" readonly />

JavaScript

$(function() {
  $('#checkin').datepicker({
    buttonText: 'Choose a check-in day',
    buttonImage: 'images/calendar_icon.png',
    buttonImageOnly: false,
    dateFormat: 'mm/dd/yy',
    onSelect: function(dateText) {
      var objDate = new Date(dateText);
      var chkinDate = $.datepicker.formatDate('dd', objDate);
      var chkinMonth = $.datepicker.formatDate('M yy', objDate);
      $('#b_checkin_day').val(chkinDate);
      $('#b_checkin_month').val(chkinMonth);
    }
  });
});