Item: bke
Rating: 3.4
Author: sunlihao3000

0 Downloads
3 Views
Tweet
Download Now View Demo

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

More from sunlihao3000

bke

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

Technologies

Comments

More from sunlihao3000

A Pen by sunlihao3000

sum js

js return

js compared function

You Might Also Like

JavaScript Calculator

Nephila

Website #2

Siema - add arrows navigation to prototype

Game Gard (Gamer Space)

radius scatter

safety.com

toba