如何讓用戶輸入選定的房間並通過兩個日期之間的天數差異倍數？

一旦用戶選擇他們想要的房間類型以及他們入住多少天，我該如何計算他們逗留的總費用？如何讓用戶輸入選定的房間並通過兩個日期之間的天數差異倍數？

我不太清楚如何抓住用戶選擇的房間，並通過diffDays獲取多個房間以獲得總成本。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script> 
 
\t \t function check() { 
 
\t \t \t var date1 = new Date(document.getElementById('checkin').value); 
 
\t \t \t var date2 = new Date(document.getElementById('checkout').value); 
 
\t \t \t var diff = Math.abs(date2.getTime() - date1.getTime()); 
 
\t \t \t var diffDays = Math.ceil(diff/(1000 * 3600 * 24)); 
 
    
 
\t \t \t if (date1 > date2){ 
 
\t \t \t \t alert("Check-out date must be after check-in date!") 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t calculate(); 
 
\t \t \t } \t 
 
\t \t } 
 

 
\t \t //function calculate(); 
 
\t \t // \t if (document.getElementById("standard") 
 
\t \t // \t \t var report = this.value * 50 * dayDiff; 
 

 
</script> 
 
<body> 
 
    <form> 
 
\t <fieldset> 
 
\t <legend>Reserve Hotel Room</legend> 
 
\t \t \t Check-In Date:<br> 
 
\t \t \t <input type="date" id="checkin" name="checkin" required> 
 
\t \t \t <br><br> 
 
\t \t \t Check-Out Date:<br> 
 
\t \t \t <input type="date" id="checkout" name="checkout" required> 
 
\t \t \t <br><br> 
 
\t \t \t Room: 
 
\t \t \t <select id="room" name="room" onchange="report(this.value)"> 
 
\t \t \t \t <option id="standard" value="50">Standard ($50/night)</option> 
 
\t \t \t \t <option id="queen" value="75">Queen ($75/night)</option> 
 
\t \t \t \t <option id="king" value="100">King ($100/night)</option> 
 
\t \t \t \t <option id="business" value="125">Business ($125/night)</option> 
 
\t \t \t \t <option id="deluxe" value="150">Deluxe Suite ($150/night)</option> 
 
\t \t \t </select> 
 
\t \t \t <button type="submit" onclick="check()">Submit</button> 
 
\t \t \t </fieldset> 
 
\t </form> 
 
</body>

我將如何執行的計算功能到它需要房間的價值選擇，並在幾天之差乘以呢？

**我不想使用datepicker。

來源

2016-11-11 ChaCol

你的問題因爲它太寬泛。如果你把它分解成單獨的任務，你可以很容易地研究它們並找到你的答案。例如 - 你如何從輸入中獲得價值？我如何在幾天內獲得兩個日期之間的差異？我如何乘以兩個值？ –

你應該把'datepicker'作爲'Check-In Date'和'Check-Out Date' – Bharat

@BharatPatidar我正在嘗試使用HTML窗體type =「date」來做這件事，因爲datepicker現在對我來說似乎有點複雜。 – ChaCol

您可以通過

// contains the difference in milliseconds 
diffDate = (checkOutDate - checkInDate), 

// contains the difference in days 
diffDays = 1 + (diffDate/1000/60/60/24); 

// total cost for their stay 
selectedRoomRate = $("#room").val(); 
selectedRoomTotalCost = selectedRoomRate * diffDays;

更新2016查詢的天數-11-11：
已更新片段以返回成本。

更新2016年11月12日：
<input list="roomList">將帶給您只是建議，而輸入的值。要獲得選擇房間類型的選項，您需要<select>標記。

試試下面的代碼片段：

function check() { 
 
    var checkInDate = new Date($("#checkin").val()), 
 
    checkOutDate = new Date($("#checkout").val()), 
 
    diffDate = (checkOutDate - checkInDate), 
 
    diffDays = 1 + (diffDate/1000/60/60/24), 
 
    selectedRoomRate = $("#room").val(), 
 
    selectedRoomTotalCost; 
 

 
    if (diffDate < 0) { 
 
    alert("Check-out date must be after check-in date!"); 
 
    return; 
 
    } 
 

 
    selectedRoomTotalCost = selectedRoomRate * diffDays; 
 

 
    alert('Total Cost: $' + selectedRoomTotalCost); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<meta charset=utf-8> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
    <link rel="stylesheet" href="settings.css"> 
 
    <title>Tranquility Hotels Limited</title> 
 
    <script> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div class="center"> 
 
    <form> 
 
     <fieldset> 
 
     <legend>Reserve Hotel Room</legend> 
 
     First Name: 
 
     <input type="text" name="firstname" placeholder="First Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>Last Name: 
 
     <input type="text" name="lastname" placeholder="Last Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required> 
 
     <br> 
 
     <br>Street Address: 
 
     <input type="text" name="street" placeholder="1234 Awesome Street" size="30" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>City: 
 
     <input type="text" name="city" placeholder="Cleveland" size="30" pattern="[A-Za-z ]+" title="Alphabet characters only." required> 
 
     <br> 
 
     <br>State: 
 
     <input list="states" name="state" placeholder="OH" size="10" required> 
 
     <datalist id="states"> 
 
      <option value="AL">Alabama</option> 
 
      <option value="AK">Alaska</option> 
 
      <option value="AZ">Arizona</option> 
 
      <option value="AR">Arkansas</option> 
 
      <option value="CA">California</option> 
 
      <option value="CO">Colorado</option> 
 
      <option value="CT">Connecticut</option> 
 
      <option value="DE">Delaware</option> 
 
      <option value="FL">Florida</option> 
 
      <option value="GA">Georgia</option> 
 
      <option value="HI">Hawaii</option> 
 
      <option value="ID">Idaho</option> 
 
      <option value="IL">Illinois</option> 
 
      <option value="IN">Indiana</option> 
 
      <option value="IA">Iowa</option> 
 
      <option value="KS">Kansas</option> 
 
      <option value="KY">Kentucky</option> 
 
      <option value="LA">Louisiana</option> 
 
      <option value="ME">Maine</option> 
 
      <option value="MD">Maryland</option> 
 
      <option value="MA">Massachusetts</option> 
 
      <option value="MI">Michigan</option> 
 
      <option value="MN">Minnesota</option> 
 
      <option value="MS">Mississippi</option> 
 
      <option value="MO">Missouri</option> 
 
      <option value="MT">Montana</option> 
 
      <option value="NE">Nebraska</option> 
 
      <option value="NV">Nevada</option> 
 
      <option value="NH">New Hampshire</option> 
 
      <option value="NJ">New Jersey</option> 
 
      <option value="NM">New Mexico</option> 
 
      <option value="NY">New York</option> 
 
      <option value="NC">North Carolina</option> 
 
      <option value="ND">North Dakota</option> 
 
      <option value="OH">Ohio</option> 
 
      <option value="OK">Oklahoma</option> 
 
      <option value="OR">Oregon</option> 
 
      <option value="PA">Pennsylvania</option> 
 
      <option value="RI">Rhode Island</option> 
 
      <option value="SC">South Carolina</option> 
 
      <option value="SD">South Dakota</option> 
 
      <option value="TN">Tennessee</option> 
 
      <option value="TX">Texas</option> 
 
      <option value="UT">Utah</option> 
 
      <option value="VT">Vermont</option> 
 
      <option value="VA">Virginia</option> 
 
      <option value="WA">Washington</option> 
 
      <option value="WV">West Virginia</option> 
 
      <option value="WI">Wisconsin</option> 
 
      <option value="WY">Wyoming</option> 
 
     </datalist> 
 
     Zip Code: 
 
     <input type="text" name="zipcode" placeholder="12345" size="10" pattern="[0-9]+" title="Numbers only." required> 
 
     <br> 
 
     <br>Phone Number: 
 
     <input type="text" name="phone" size="25" placeholder="440-123-4567" pattern="[0-9]+" title="Numbers only." required>E-mail: 
 
     <input type="email" name="email" size="25" placeholder="[email protected]" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" required> 
 
     <br> 
 
     <br>Check-In Date: 
 
     <input type="date" id="checkin" name="checkin" value="2015-07-05" required>Check-Out Date: 
 
     <input type="date" id="checkout" name="checkout" value="2015-07-17" required> 
 
     <br> 
 
     <br>Room: 
 
     <select id="room" name="room" required> 
 
      <option value="50" selected>Standard ($50/night)</option> 
 
      <option value="75">Queen ($75/night)</option> 
 
      <option value="100">King ($100/night)</option> 
 
      <option value="125">Business ($125/night)</option> 
 
      <option value="150">Deluxe Suite ($150/night)</option> 
 
     </select> 
 
     <button type="submit" onclick="check()">Submit</button> 
 
     </fieldset> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-11 09:29:32 sam

我使用了類似於該功能的東西，但我如何才能在幾天內獲得這種差異，並將其乘以用戶選擇的房間？ – ChaCol

以上'diffDays'將包含天數的差異 – sam

上面的更新代碼段，返回停留成本 – sam

你可以使用datepicker()從Jquery-UI並添加一個函數來計算datediff。

$("#checkin").datepicker(); 
 
$("#checkout").datepicker(); 
 

 
$("#check").click(function(){ 
 
    function parseDate(str) { 
 
    var mdy = str.split('/'); 
 
    return new Date(mdy[2], mdy[0]-1, mdy[1]); 
 
    } 
 

 
    function daydiff(first, second) { 
 
    return Math.round((second-first)/(1000*60*60*24)); 
 
    } 
 
    
 
    var CostPerNight = $('#costRoom').val() 
 
    
 
    totalCost = daydiff(parseDate($('#checkin').val()), parseDate($('#checkout').val())) * CostPerNight; 
 

 
    alert(totalCost) 
 

 
})

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="center"> 
 
    <form> 
 
     <fieldset> 
 
     <legend>Reserve Hotel Room</legend> 
 
     First Name: 
 
     <input type="text" name="firstname" placeholder="First Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>Last Name: 
 
     <input type="text" name="lastname" placeholder="Last Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required> 
 
     <br> 
 
     <br>Street Address: 
 
     <input type="text" name="street" placeholder="1234 Awesome Street" size="30" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>City: 
 
     <input type="text" name="city" placeholder="Cleveland" size="30" pattern="[A-Za-z ]+" title="Alphabet characters only." required> 
 
     <br> 
 
     <br>State: 
 
     <input list="states" name="state" placeholder="OH" size="10" required> 
 
     <datalist id="states"> 
 
      <option value="AL">Alabama</option> 
 
      <option value="AK">Alaska</option> 
 
      <option value="AZ">Arizona</option> 
 
      <option value="AR">Arkansas</option> 
 
      <option value="CA">California</option> 
 
      <option value="CO">Colorado</option> 
 
      <option value="CT">Connecticut</option> 
 
      <option value="DE">Delaware</option> 
 
      <option value="FL">Florida</option> 
 
      <option value="GA">Georgia</option> 
 
      <option value="HI">Hawaii</option> 
 
      <option value="ID">Idaho</option> 
 
      <option value="IL">Illinois</option> 
 
      <option value="IN">Indiana</option> 
 
      <option value="IA">Iowa</option> 
 
      <option value="KS">Kansas</option> 
 
      <option value="KY">Kentucky</option> 
 
      <option value="LA">Louisiana</option> 
 
      <option value="ME">Maine</option> 
 
      <option value="MD">Maryland</option> 
 
      <option value="MA">Massachusetts</option> 
 
      <option value="MI">Michigan</option> 
 
      <option value="MN">Minnesota</option> 
 
      <option value="MS">Mississippi</option> 
 
      <option value="MO">Missouri</option> 
 
      <option value="MT">Montana</option> 
 
      <option value="NE">Nebraska</option> 
 
      <option value="NV">Nevada</option> 
 
      <option value="NH">New Hampshire</option> 
 
      <option value="NJ">New Jersey</option> 
 
      <option value="NM">New Mexico</option> 
 
      <option value="NY">New York</option> 
 
      <option value="NC">North Carolina</option> 
 
      <option value="ND">North Dakota</option> 
 
      <option value="OH">Ohio</option> 
 
      <option value="OK">Oklahoma</option> 
 
      <option value="OR">Oregon</option> 
 
      <option value="PA">Pennsylvania</option> 
 
      <option value="RI">Rhode Island</option> 
 
      <option value="SC">South Carolina</option> 
 
      <option value="SD">South Dakota</option> 
 
      <option value="TN">Tennessee</option> 
 
      <option value="TX">Texas</option> 
 
      <option value="UT">Utah</option> 
 
      <option value="VT">Vermont</option> 
 
      <option value="VA">Virginia</option> 
 
      <option value="WA">Washington</option> 
 
      <option value="WV">West Virginia</option> 
 
      <option value="WI">Wisconsin</option> 
 
      <option value="WY">Wyoming</option> 
 
     </datalist> 
 
     Zip Code: 
 
     <input type="text" name="zipcode" placeholder="12345" size="10" pattern="[0-9]+" title="Numbers only." required> 
 
     <br> 
 
     <br>Phone Number: 
 
     <input type="text" name="phone" size="25" placeholder="440-123-4567" pattern="[0-9]+" title="Numbers only." required>E-mail: 
 
     <input type="email" name="email" size="25" placeholder="[email protected]" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" required> 
 
     <br> 
 
     <br>Check-In Date: 
 
     <input type="date" id="checkin" name="checkin" required>Check-Out Date: 
 
     <input type="date" id="checkout" name="checkout" required> 
 
     <br> 
 
     <br>Room: 
 
     <input id="costRoom" list="rooms" name="room" size="16" required> 
 
     <datalist id="rooms"> 
 
      <option value="50">Standard ($50/night)</option> 
 
      <option value="75">Queen ($75/night)</option> 
 
      <option value="100">King ($100/night)</option> 
 
      <option value="125">Business ($125/night)</option> 
 
      <option value="150">Deluxe Suite ($150/night)</option> 
 
     </datalist> 
 
     <br> 
 
     <br> 
 
     <button type="submit" id="check">Submit</button> 
 
     </fieldset> 
 
    </form> 
 
    </div>

功能daydiff源here

UPDATE

沒有datpicker你可以與你的分隔符，你想要的格式和拆分添加日期。

例如：

如果你使用：2017年2月1日

您只需修改拆分到：var mdy = str.split('.');

來源

2016-11-11 09:26:58

我試圖避免使用datepicker。 – ChaCol

好吧，只需添加所需的格式並修改拆分。查看我的更新 –

使用日期選擇器，設置首選格式mm/dd/yyyy的其他人，你必須更改日期格式內的天計算功能

function calDays(){ 
    startDate = $('#start-date').val(); 
    enddate =$('#start-date').val(); 
    days = Math.round(((new Date(endDate))- (new Date(startDate)))/(3600000*24)) 
    daysSuffix = " Day"; 
    if(days > 1){ 
     daysSuffix = " Days"; 
    } 
    $('#total-days').val(days + daysSuffix) 
}

來源

2016-11-11 09:37:29

我試圖避免使用datepicker。 – ChaCol

沒有datepicker，你的日期將完全丟失，用戶我輸入某個時間mm-dd-yyyy或某個時間dd-mm-yyyy或somethime mm/dd/yy –

我使用html表單，通過彈出日曆選擇它因此用戶不會輸入任何只是選擇日期的內容。我敢肯定，它不允許用戶輸入除格式以外的其他任何內容。mm-dd-yyyy – ChaCol

如何讓用戶輸入選定的房間並通過兩個日期之間的天數差異倍數？

回答

相關問題