Question

＆＃13;

<script type="text/javascript">	
		
		$(document).ready(function() {
$("#datepicker1").datepicker({ dateFormat: 'dd-mm-yy',  beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }}).val();
$("#datepicker2").datepicker({ dateFormat: 'dd-mm-yy', beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }}).val();

});

function getBookingDates() {

var Checkin = $('#datepicker1').val();
var Checkout = $('#datepicker2').val();

var promo = $("#PromoCode").text();
var noofadults = $( "#adults option:selected" ).text();
var noofchildren = $( "#children option:selected" ).text();
		
var booking1 = "https://www.thebookingbutton.com.au/properties/qbatcoldirect?check_in_date=";
var booking2 = "&check_out_date=";
var booking3 = "¤cy=AUD&number_adults=";
var booking4 = "&number_children=";

return booking1 + Checkin + booking2 + Checkout + booking3 + noofadults + booking4 + noofchildren;
}

function thelink() {
    var redirectURL = getBookingDates();
   window.location.assign(redirectURL);
 }

</script>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

＆＃13;

<style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 3px 0 0 0;
    }
    .overflow {
      height: 200px;
    }
   table { 
  	width: 100%; 
 	/* border-collapse: collapse; */
	}
	td { 
  	padding: 6px; 
  	/*border: 1px solid #ccc;  */
  	text-align: left; 
	}
	@media only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
		table, td, tr { 
		display: block; 
	}
	tr {/* border: 1px solid #ccc;*/ }
	td { 
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee;  */
		position: relative;
		padding-left: 50%; 
	}
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
  </style>

＆＃13;

<!doctype html><html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hotel Bookings</title>

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

  
  <body> 

<form>
    <fieldset>
    <div class="form">
            <table>
                <tr>
                	<td class="lbl"><label for="datepicker1">Checkin</label></td>
                    <td><input type="text" id="datepicker1" placeholder="dd-mm-yyyy"></td>
                    <td class="lbl"><label for="datepicker2">Checkout</label></td>
                    <td><input type="text" id="datepicker2" placeholder="dd-mm-yyyy"></td>
                    <td class="lbl"><label for="adults">Adults</label></td>
                    <td><select name="adults" id="adults">
      					<option>1</option>
      					<option selected="selected">2</option>
      					<option>3</option>
      					<option>4</option>
      					<option>5</option>
      					<option>6</option>
      					<option>7</option>
      					<option>8</option>
       					<option>9</option>
      					<option>10</option>
      					</select></td>
                    <td class="lbl"><label for="children">Children</label></td>
                    <td><select name="children" id="children">
      					<option selected="selected">0</option>
      					<option>1</option>
      					<option>2</option>
      					<option>3</option>
      					<option>4</option>
      					<option>5</option>
      					<option>6</option>
      					<option>7</option>
      					<option>8</option>
      					<option>9</option>
      					<option>10</option>
    					</select></td>
                    <td class="lbl"><input type="button" value="Check Availability" onClick="thelink()"></td>
  
			</tr>
            </table>
        </div>

    </fieldset>
</form>

</body>

＆＃13;

我已经使表成功响应成功但日历 - 日期选择器垂直显示意味着所有日期都出现在另一个之下，这是不可行的。如何在不改变datepicker外观的情况下使表格响应？

为了使表（包含datepicker）响应，日历的格式会发生变化

0 个答案: