bke

In this example below you will see how to do a bke with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sunlihao3000, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sunlihao3000 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>bke</title>
  
  
  <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="bke-holder">
            <div class="search-box full-width">
                <div class="search-box__body">
                    <div class="search-box--bigday">

                    <form name="bke_search" method="get" action="">
                        <div id="bke_searchbox_wrapper">
                            <div class="field-wrapper width50">
                                <div class="arr-label label">Arriving</div>
                                <input type="text" class="text-center from_month" id="from_month" name="from_month">
                                <input type="text" class="from-day-label"/>
                               
                                <input type="type" class="from" name="from" id="from" readonly="readonly">
                            </div>

                            <div class="field-wrapper width50">
                                <div class="dep-label label">Departing</div>
                               
                                <input type="text" class="text-center to_month" id="to_month" name="to_month">
                                <input type="text" class="to-day-label"/>
                                <input type="type" class="to" name="to" id="to" readonly="readonly">
                            </div>
                            <div class="ratecode text-center">
                                <input type="text" name="bke_ratecode" size="8" class="bke_drop" style="text-align: center;" onclick="if (this.value == 'Have a promo code?') this.value = '';" placeholder="Have a promo code?">
                            </div>

                            <div class="searchbox-wrapper text-center">
                                <a target="_blank" class="btn-default btn searchbox_now"> Book Now</a>
                            </div>
                        </div>
                    </form>

                </div>

                </div>

            </div>


        </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sunlihao3000/bke-grqBEO */
/* Background Colors */
.bke-holder {
  float: left;
  width: 250px;
  height: 55%;
  background-color: #e3e528;
  position: relative;
  z-index: 11;
  top: 20px;
}
.bke-holder .search-box {
  color: #000;
}
.bke-holder .search-box .search-box__top {
  color: #000;
  margin-top: 30px;
}
.bke-holder .search-box .search-box__top i {
  font-size: 36px;
  float: left;
  margin-left: 41px;
}
.bke-holder .search-box .search-box__top span {
  font-size: 16px;
  float: left;
  text-transform: uppercase;
  margin-left: 10px;
  margin-top: 8px;
  font-weight: bold;
}
.bke-holder .search-box .search-box_bottom {
  text-align: center;
  font-size: 14px;
}
.bke-holder .search-box .search-box_bottom.padding20 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.search-box--bigday h2 {
  color: #000;
  text-transform: uppercase;
}
.search-box--bigday #bke_searchbox_wrapper {
  float: left;
  width: 200px;
  margin-left: 15px;
  margin-top: 10px;
}
.search-box--bigday #bke_searchbox_wrapper .from,
.search-box--bigday #bke_searchbox_wrapper .to {
  width: 92px;
  font-size: 58px;
  overflow: hidden;
  float: left;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  padding-left: 10px;
  text-align: left;
  background: none !important;
  background-color: #000 !important;
  color: #fff;
}
.search-box--bigday #bke_searchbox_wrapper .field-wrapper {
  float: left;
  width: 100%;
}
.search-box--bigday #bke_searchbox_wrapper .field-wrapper.width50 {
  float: left;
  width: 46%;
  margin: 2%;
  position: relative;
  z-index: 10;
}
.search-box--bigday #bke_searchbox_wrapper .field-wrapper.width50 .label {
  text-transform: uppercase;
  color: #000;
}
.search-box--bigday #bke_searchbox_wrapper .field-wrapper.width50 .label,
.search-box--bigday #bke_searchbox_wrapper .field-wrapper.width50 .hasDatepicker {
  float: left;
  width: 100%;
  clear: both;
}
.search-box--bigday #bke_searchbox_wrapper .from_month,
.search-box--bigday #bke_searchbox_wrapper .to_month {
  float: left;
  border: none;
  width: 100%;
  background-color: #000;
  color: #e3e528;
  font-size: 12px;
  text-transform: uppercase;
  border-bottom: 1px solid #333;
  padding: 4px 0;
}

body .search-box--bigday h2 {
  color: #000;
  padding: 0;
  margin: 30px 0 0 0;
  font-size: 22px;
}

.search-box-pop-up .search-box--bigday #bke_searchbox_wrapper {
  width: 300px;
  margin-left: 118px;
}
.search-box-pop-up .search-box--bigday #bke_searchbox_wrapper .from,
.search-box-pop-up .search-box--bigday #bke_searchbox_wrapper .to {
  width: 138px;
  font-size: 52px;
  padding: 0 37px;
}

.short-height .search-box_bottom,
.short-height .search-box__top {
  display: none;
}
.short-height .btn-default {
  padding-top: 0;
  padding-bottom: 0;
}
.short-height .pnav {
  margin-top: 35px;
}
.short-height .pnav > li > a {
  padding: 2px 0;
}
.short-height .menu-wrap .search-box--bigday #bke_searchbox_wrapper .from,
.short-height .menu-wrap .search-box--bigday #bke_searchbox_wrapper .to {
  font-size: 43px;
  padding: 0px 18px;
}

a.searchbox_now {
  margin: 0;
}

.have-promo-code {
  cursor: pointer;
  clear: both;
  position: relative;
  margin-bottom: 20px;
}
.have-promo-code p {
  font-size: 14px;
  text-align: center;
  padding-top: 5px;
  position: relative;
  top: 2px;
  cursor: pointer;
}
.have-promo-code i {
  bottom: 14px;
  cursor: pointer;
  position: absolute;
  right: 24px;
}
.have-promo-code .fa.fa-info-circle {
  position: absolute;
  top: 8px;
}
.have-promo-code .open-rate {
  right: 6px;
  top: 14px;
}

#ratecode {
  display: none;
  position: relative;
}

.ratecode-closer i {
  display: none;
  position: relative;
  left: 10px;
  cursor: pointer;
}

.search-box-pop-up-holder .have-promo-code i {
  right: 65px;
}
.search-box-pop-up-holder .have-promo-code .open-rate {
  right: 51px;
  top: 14px;
}

.from-day-label,
.to-day-label {
  width: 92px;
  font-size: 58px;
  overflow: hidden;
  float: left;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  padding-left: 10px;
  text-align: left;
  background: none !important;
  background-color: #000 !important;
  color: #fff;
  height: 80px;
}

#from {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 0;
}

#to {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 0;
}

#ui-datepicker-div {
  z-index: 100 !important;
}


/*Downloaded from https://www.codeseek.co/sunlihao3000/bke-grqBEO */
$(document).ready(function(){


    var padout = function(number) {
      var number = String(number);
      return (number.length < 2) ? '0' + number : number;
    };

    var bke_url = 'http://secure.therosehotel.com/bookings/checkavailability';
    var dateoutput = '';
    
    //Arrival datepicker
    $( "#from" ).datepicker({
        defaultDate: 0,
        numberOfMonths: 1,
        dateFormat: 'dd mm yy',
        minDate: 0,     
        dateonly:true,
        altField: "#from_month",
        altFormat: "MM",

        onClose: function( selectedDate ) {        
          var myDate = $(this).datepicker('getDate'); 
          myDate.setDate(myDate.getDate()+1); 
          $( "#to" ).datepicker( "option", "minDate", myDate);   
          

          setTimeout(function(){ 
            $("#to").datepicker("show"); 
          },0);
        }
    });


    //Departure datepicker
    $( "#to" ).datepicker({
        defaultDate: "+1d",
        numberOfMonths: 1,
        dateFormat: 'dd mm yy',   
        minDate: 1,
        dateonly:true,
        altField: "#to_month",
        altFormat: "MM",
        onSelect: function(dateText, inst) { 
          
          var changed_to_day = $(this).datepicker('getDate').getDate(); 
          $(".to-day-label").val(changed_to_day);           

            
        },
        onClose: function( selectedDate ) { 
            dateDifference();       
        }

    });

    // set input dates
     
    var myDate = new Date();
    var tomorrow = new Date(myDate.getTime() + 24 * 60 * 60 * 1000);
    var currect_month = myDate.getMonth() + 1;
  
    var today_day = myDate.getDate();
    var tomor_day = tomorrow.getDate();
 
    var months = new Array();

    months[0] = "January";
    months[1] = "February";
    months[2] = "March";
    months[3] = "April";
    months[4] = "May";
    months[5] = "June";
    months[6] = "July";
    months[7] = "August";
    months[8] = "September";
    months[9] = "October";
    months[10] = "November";
    months[11] = "December";

    var prettyMonthFrom =months[myDate.getMonth()];
    var prettyMonthTo =months[tomorrow.getMonth()];
    
  var prettyDay =    (today_day < 10 ? '0' +  today_day : today_day);
  var prettyDate =    (today_day < 10 ? '0' +  today_day : today_day) + '  ' + (currect_month < 10 ? '0' +  currect_month : currect_month);
  
  var prettyDay2 =  (tomor_day < 10 ? '0' +  tomor_day : tomor_day);
  var prettyDate2 =  (tomor_day < 10 ? '0' +  tomor_day : tomor_day) + '  ' + (currect_month < 10 ? '0' +  currect_month : currect_month);

    //init
    $("#from_month").val(prettyMonthFrom);
    $(".from-day-label").val(prettyDay);
    $("#from").val(prettyDate);
    
    $("#to_month").val(prettyMonthTo);
    $(".to-day-label").val(prettyDay2);
    $("#to").val(prettyDate2);

    $("#from").change(function() {
        var changed_from_day = $("#from" ).datepicker('getDate').getDate(); 
        $(".from-day-label").val(changed_from_day);
    });
    $("#to").change(function() {
      alert();

    });  
  
    //count the number of nights
    function dateDifference(to_day) {

        if($("#from").val()!='' && $("#to").val()!='') {
            // from date updated
            var from_day = $("#from" ).datepicker('getDate').getDate();  
            var from_month = $("#from" ).datepicker('getDate').getMonth() + 1;  
            var from_year = $("#from" ).datepicker('getDate').getFullYear();  
            // to date updated

            var to_day = $("#to" ).datepicker('getDate').getDate(); 

            //var to_month = $("#to").datepicker('getDate').getMonth()+ 1;  
            var to_month = months.indexOf($("#to_month").val()) + 1; 
            var to_year = $("#to" ).datepicker('getDate').getFullYear();  

            
            bke_submit(from_day,from_month,from_year,to_day,to_month,to_year);
        };
    }

$(".from-day-label,.arr-label,#from_month").click(function(){ $("#from").datepicker("show"); }); 
$(".to-day-label,.dep-label,#to_month").click(function(){ $("#to").datepicker("show"); }); 

  
    var this_ratecode  = $('input[name="bke_ratecode"]');
    var ratecode = $('input[name="bke_ratecode"]').val();

    // submit date to bke
    function bke_submit(arrival_day,arrival_month,arrival_year,departure_day,departure_month,departure_year) {

        ratecode = $('input[name="bke_ratecode"]').val();

        var url = bke_url+ '?bke_arrival_day='+arrival_day +"&bke_arrival_month="+ arrival_month+
            "&bke_arrival_year="+arrival_year+"&bke_departure_day="+ departure_day +"&bke_departure_month="+ departure_month +"&bke_departure_year="+ departure_year+"&bke_ratecode=" + ratecode;

        $('.search-box .searchbox_now').click(function() {
            window.location = url;
            //window.open(url, true, '_blank');
        });   
    };
  
    this_ratecode.val('');
    this_ratecode.attr("placeholder", "Have a promo code?");
    this_ratecode.on('focusout', function(e) {             
        
        var this_input_val = this_ratecode.val();
        
        if (this_input_val == "") {
            this_ratecode.val('Have a promo code?');
        } else {
            this_input_val = this_ratecode.val();
            dateDifference()

        };         
    });

    dateDifference();

});

Comments