2016-11-09 20 views
0

私は、ユーザーがチェックイン日とチェックアウト日を入力するまでの日数を計算する方法を理解しようとしています。私はその番号を取って、選択した部屋の選択肢によって複数の部屋を選択する必要があります。滞在の総費用を求めて、画面のどこかに表示する必要があります。「チェックイン日」と「チェックアウト日」の間の日数の計算方法は?

日数を計算する方法は完全にはわかりませんが、部屋のコストを得るためには、各タイプの部屋にidを割り当てて、現在の設定ではなく数値を割り当てる必要があります。今?または、どのようにして各部屋の選択に価値を割り当てることができますか?

<script> 
 
\t \t \t function check() { 
 
\t \t \t \t if(document.getElementById('checkin').value > document.getElementById('checkout').value) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Check-out date must be after check-in date!") 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t //function result() { 
 
\t \t \t \t //document.getElementById('standard').value * 
 
\t \t \t //} 
 
</script> 
 

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

答えて

2

<script> 
 
function check() { 
 
    var date1 = new Date(document.getElementById('checkin').value); 
 
    var date2 = new Date(document.getElementById('checkout').value); 
 
    var diff = Math.abs(date2.getTime() - date1.getTime()); 
 
    var noofdays = Math.ceil(diff/(1000 * 3600 * 24)); 
 
    if(date1 > date2){ 
 
\t alert("Check-out date must be after check-in date!") 
 
    } 
 
    else { 
 
    alert(noofdays); 
 
    } 
 
} \t \t 
 
</script> 
 
<body> 
 
    <form> 
 
\t <fieldset> 
 
\t <legend>test</legend> 
 
\t \t \t First Name: <br> 
 
\t \t \t <input type="text" name="firstname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required> 
 
\t \t \t <br><br> 
 
\t \t \t Last Name: <br> 
 
\t \t \t <input type="text" name="lastname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required> 
 
\t \t \t <br><br> 
 
\t \t \t Street Address: <br> 
 
\t \t \t <input type="text" name="street" size="45" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required> 
 
\t \t \t <br><br> 
 
\t \t \t City: <br> 
 
\t \t \t <input type="text" name="city" size="45" pattern="[A-Za-z ]+" title="Alphabet characters only." required> 
 
\t \t \t <br><br> 
 
\t \t \t State: <br> 
 
\t \t \t <input list="states" name="state" size="45" required> 
 
\t \t \t \t <datalist id="states"> 
 
\t \t \t \t \t \t <option value="AL">Alabama</option> 
 
\t \t \t \t \t \t <option value="AK">Alaska</option> 
 
\t \t \t \t \t \t <option value="AZ">Arizona</option> 
 
\t \t \t \t \t \t <option value="AR">Arkansas</option> 
 
\t \t \t \t \t \t <option value="CA">California</option> 
 
\t \t \t \t \t \t <option value="CO">Colorado</option> 
 
\t \t \t \t \t \t <option value="CT">Connecticut</option> 
 
\t \t \t \t \t \t <option value="DE">Delaware</option> 
 
\t \t \t \t \t \t <option value="FL">Florida</option> 
 
\t \t \t \t \t \t <option value="GA">Georgia</option> 
 
\t \t \t \t \t \t <option value="HI">Hawaii</option> 
 
\t \t \t \t \t \t <option value="ID">Idaho</option> 
 
\t \t \t \t \t \t <option value="IL">Illinois</option> 
 
\t \t \t \t \t \t <option value="IN">Indiana</option> 
 
\t \t \t \t \t \t <option value="IA">Iowa</option> 
 
\t \t \t \t \t \t <option value="KS">Kansas</option> 
 
\t \t \t \t \t \t <option value="KY">Kentucky</option> 
 
\t \t \t \t \t \t <option value="LA">Louisiana</option> 
 
\t \t \t \t \t \t <option value="ME">Maine</option> 
 
\t \t \t \t \t \t <option value="MD">Maryland</option> 
 
\t \t \t \t \t \t <option value="MA">Massachusetts</option> 
 
\t \t \t \t \t \t <option value="MI">Michigan</option> 
 
\t \t \t \t \t \t <option value="MN">Minnesota</option> 
 
\t \t \t \t \t \t <option value="MS">Mississippi</option> 
 
\t \t \t \t \t \t <option value="MO">Missouri</option> 
 
\t \t \t \t \t \t <option value="MT">Montana</option> 
 
\t \t \t \t \t \t <option value="NE">Nebraska</option> 
 
\t \t \t \t \t \t <option value="NV">Nevada</option> 
 
\t \t \t \t \t \t <option value="NH">New Hampshire</option> 
 
\t \t \t \t \t \t <option value="NJ">New Jersey</option> 
 
\t \t \t \t \t \t <option value="NM">New Mexico</option> 
 
\t \t \t \t \t \t <option value="NY">New York</option> 
 
\t \t \t \t \t \t <option value="NC">North Carolina</option> 
 
\t \t \t \t \t \t <option value="ND">North Dakota</option> 
 
\t \t \t \t \t \t <option value="OH">Ohio</option> 
 
\t \t \t \t \t \t <option value="OK">Oklahoma</option> 
 
\t \t \t \t \t \t <option value="OR">Oregon</option> 
 
\t \t \t \t \t \t <option value="PA">Pennsylvania</option> 
 
\t \t \t \t \t \t <option value="RI">Rhode Island</option> 
 
\t \t \t \t \t \t <option value="SC">South Carolina</option> 
 
\t \t \t \t \t \t <option value="SD">South Dakota</option> 
 
\t \t \t \t \t \t <option value="TN">Tennessee</option> 
 
\t \t \t \t \t \t <option value="TX">Texas</option> 
 
\t \t \t \t \t \t <option value="UT">Utah</option> 
 
\t \t \t \t \t \t <option value="VT">Vermont</option> 
 
\t \t \t \t \t \t <option value="VA">Virginia</option> 
 
\t \t \t \t \t \t <option value="WA">Washington</option> 
 
\t \t \t \t \t \t <option value="WV">West Virginia</option> 
 
\t \t \t \t \t \t <option value="WI">Wisconsin</option> 
 
\t \t \t \t \t \t <option value="WY">Wyoming</option> 
 
\t \t \t \t \t </datalist> 
 
\t \t \t <br><br> 
 
\t \t \t Zip Code: <br> 
 
\t \t \t <input type="text" name="zipcode" size="45" pattern="[0-9]+" title="Numbers only." required> 
 
\t \t \t <br><br> 
 
\t \t \t Phone Number: <br> 
 
\t \t \t <input type="text" name="phone" size="45" pattern="[0-9-]+" title="Numbers only." required> 
 
\t \t \t <br><br> 
 
\t \t \t E-mail: <br> 
 
\t \t \t <input type="email" name="email" size="45" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" required> 
 
\t \t \t <br><br> 
 
\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:<br> 
 
\t \t \t <input list="rooms" name="room" size="16" required> 
 
\t \t \t \t <datalist id="rooms"> 
 
\t \t \t \t \t <option value="Standard ($50/night)"> 
 
\t \t \t \t \t <option value="Queen ($75/night)"> 
 
\t \t \t \t \t <option value="King ($100/night)"> 
 
\t \t \t \t \t <option value="Business ($125/night)"> 
 
\t \t \t \t \t <option value="Deluxe Suite ($150/night)"> 
 
\t \t \t \t </datalist> 
 
\t \t \t <br><br> 
 
\t \t \t <button type="submit" onclick="check()">Submit</button> 
 
\t \t \t </fieldset> 
 
\t </form> 
 
</body>

関連する問題