Booking

by Deniss Samoilov

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<section id="booking">
  <h1>Book Now</h1>
  <form action="#">
    <fieldset>
      <legend>Booking Fields</legend>
      <div class="dates">
        <label for="booking-dates">Dates</label>
        <div class="booking-dates">
          <input type="text" id="booking-dates" readonly>
          <input type="hidden" id="booking-checkin">
          <input type="hidden" id="booking-checkout">    
          <div id="booking-datepicker"></div>
        </div>
      </div>
      
      <p class="column">
        <label for="booking-adults">Adults</label>
        <select name="adults" id="booking-adults">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </p>
      <p class="column">
        <label for="booking-children">Children</label>
        <select name="adults" id="booking-children">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </p>
      <p class="column">
        <label for="booking-rooms">Rooms</label>
        <select name="rooms" id="booking-rooms">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </p>
      <p class="controls">
        <input type="submit" class="button" value="Book Now">
      </p>
    </fieldset>
  </form>
</section>

SCSS

$bg: #2B2E4A;
$border: #903749;
$borderFocus: #E84545;
$color: #fff;
$inactiveColor: #53354A;
$buttonBg: #903749;
$buttonHover: #E84545;

$transition: 250ms ease-in-out;

$default-font: 'Lato', sans-serif;

html, body, input, textarea, button {
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

html, body {
  background: $bg;
}

body {
  font: 14px $default-font;
}

select {
	border-radius:0;
	background:none;
	border:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	appearance:none;

	& + .select-icon {
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid $buttonBg;
		float: left;
		height: 0; 
		margin: 21px 0 0 -28px;
		pointer-events:none;
		width: 0; 
	}

	&::-ms-expand { display:none;}
}

#booking {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: $color;
  font-size: 0;
  margin: 0 auto;
  padding: 30px 0;
  width: 320px;
  
  legend {
    display: none;
  }
  
  h1 {
    font-size: 20px;
    font-variant: small-caps;
    margin-bottom: 20px;
  }
  
  p {
    margin: 0 0 20px;
    position: relative;
    
    &.column {
      display: inline-block;
      margin-left: 10px;
      width: 100px;
    }
  }
  
  .dates {
    margin: 0 0 20px;
    & + .column {
      margin-left: 0;
    }
  }
  
  .booking-dates {
    border: 1px solid $border;
    input[type="text"], .ui-datepicker {
      border: 0;
    }
  }
  
  label {
    background: $bg;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    padding: 0 10px;
    text-align: left;
    margin: 0 10px -10px;
  }
  
  input[type="text"], select {
    background: none;
    border: 1px solid $border;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: $color;
    display: block;
    font-size: 14px;
    height: 40px;
    line-height: 20px;
   ...

JavaScript

$(function(){
	
  $('select').each(function(){
		var select = $(this);

		if (!select.next('.select-icon').length) {
    	select.after($('<div />', {'class': 'select-icon'}));
    }
	});

	var bookingDatepicker = {
    container: $('#booking-datepicker'),
    dateFormat: 'mm/dd/yy',
    dates: [null, null],
    status: null,
    inputs: {
      checkin: $('#booking-checkin'),
      checkout: $('#booking-checkout'),
      checkinField: $('#checkin'),
      checkoutField: $('#checkout'),
      dates: $('#booking-dates')
    }
  };
  
  bookingDatepicker.inputs.dates.on('click', function(){
  	bookingDatepicker.container.addClass('visible');
    $(document).on('mouseup.bookingDates', function(event) {
      if ($(event.target).closest(bookingDatepicker.container).length < 1) {
        bookingDatepicker.container.removeClass('visible');
        $(window).off('mouseup.bookingDates');
      }
    });
  });
  
  /* HIGHLIGHT DEFAULT DATES ON BOOKING */
	var checkin_date = new Date(),
		/* opening_date = new Date('April 1, 2018'), */
		checkout_date = new Date(),
		weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

	checkin_date.setHours(0);
	checkin_date.setMinutes(0);
	checkin_date.setSeconds(0);
	checkin_date.setMilliseconds(0);
  
	/* opening_date.setHours(0);
	opening_date.setMinutes(0);
	opening_date.setSeconds(0);
	opening_date.setMilliseconds(0); */

	checkout_date.setHours(0);
	checkout_date.setMinutes(0);
	checkout_date.setSeconds(0);
	checkout_date.setMilliseconds(0);

	checkout_date.setDate(checkin_date.getDate() + 1);

	var checkin_timestamp = checkin_date.getTime();
	var checkout_timestamp = checkout_date.getTime();

	/* if(checkin_timestamp < opening_date.getTime()) {
	  checkin_date = opening_date;
	  checkout_date = new Date('April 2, 2018');
	} else {
	  checkout_date.setDate(checkin_date.getDate() + 1);
	} */
  

	bookingDatepicker.dates = [checkin_timestamp, checkout_timestamp];
 ...