javascript - 如何计算 "check-in date"和 "check-out date"之间有多少天？

标签 javascript html forms datepicker

我试图弄清楚如何计算用户输入的入住日期和退房日期之间的天数。我需要将这个数字乘以他们选择的房间，以获得他们住宿的总费用并将其显示在屏幕上的某个位置。

我不完全确定如何计算天数，但是为了获取房间的费用，我需要为每种类型的房间分配一个 ID 并为其分配一个数值，而不是我当前的设置现在？或者您还可以如何为每个房间的选择分配一个值？

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

	<body>
  	  <form>
	  <fieldset>
	  <legend>test</legend>
			First Name: <br>
			<input type="text" name="firstname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
			<br><br>
			Last Name: <br>
			<input type="text" name="lastname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
			<br><br>
			Street Address: <br>
			<input type="text" name="street" size="45" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>
			<br><br>
			City: <br>
			<input type="text" name="city" size="45" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
			<br><br>
			State: <br>
			<input list="states" name="state" size="45" 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>
			<br><br>
			Zip Code: <br>
			<input type="text" name="zipcode" size="45" pattern="[0-9]+" title="Numbers only." required>
			<br><br>
			Phone Number: <br>
			<input type="text" name="phone" size="45" pattern="[0-9-]+" title="Numbers only." required>
			<br><br>
			E-mail: <br>
			<input type="email" name="email" size="45" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
			<br><br>
			Check-In Date:<br>
			<input type="date" id="checkin" name="checkin" required>
			<br><br>
			Check-Out Date:<br>
			<input type="date" id="checkout" name="checkout" required>
			<br><br>
			Room:<br>
			<input list="rooms" name="room" size="16" required>
				<datalist id="rooms">
					<option value="Standard ($50/night)">
					<option value="Queen ($75/night)">
					<option value="King ($100/night)">
					<option value="Business ($125/night)">
					<option value="Deluxe Suite ($150/night)">
				</datalist>
			<br><br>
			<button type="submit" onclick="check()">Submit</button>
			</fieldset>
	  </form>
</body>

最佳答案 

<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){ 
	alert("Check-out date must be after check-in date!")
  }
  else {
    alert(noofdays);
  }
}		
</script>
<body>
  <form>
	<fieldset>
	  <legend>test</legend>
			First Name: <br>
			<input type="text" name="firstname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
			<br><br>
			Last Name: <br>
			<input type="text" name="lastname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
			<br><br>
			Street Address: <br>
			<input type="text" name="street" size="45" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>
			<br><br>
			City: <br>
			<input type="text" name="city" size="45" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
			<br><br>
			State: <br>
			<input list="states" name="state" size="45" 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>
			<br><br>
			Zip Code: <br>
			<input type="text" name="zipcode" size="45" pattern="[0-9]+" title="Numbers only." required>
			<br><br>
			Phone Number: <br>
			<input type="text" name="phone" size="45" pattern="[0-9-]+" title="Numbers only." required>
			<br><br>
			E-mail: <br>
			<input type="email" name="email" size="45" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
			<br><br>
			Check-In Date:<br>
			<input type="date" id="checkin" name="checkin" required>
			<br><br>
			Check-Out Date:<br>
			<input type="date" id="checkout" name="checkout" required>
			<br><br>
			Room:<br>
			<input list="rooms" name="room" size="16" required>
				<datalist id="rooms">
					<option value="Standard ($50/night)">
					<option value="Queen ($75/night)">
					<option value="King ($100/night)">
					<option value="Business ($125/night)">
					<option value="Deluxe Suite ($150/night)">
				</datalist>
			<br><br>
			<button type="submit" onclick="check()">Submit</button>
			</fieldset>
	  </form>
</body>

关于javascript - 如何计算 "check-in date"和 "check-out date"之间有多少天？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40505020/

上一篇：Javascript:将数组元素作为选项放入选择框

下一篇：javascript - 如何检测Bootstrap模式滚动条的位置？

相关文章：

javascript - 如何将字符串拆分为多个用 [ ] 括起来的子字符串，并且子字符串中还可以找到分隔符？

javascript - 单击按钮重定向时的单个 anchor 标记，第一个 id 如 url 中所示，第二个 id 为隐藏

javascript - 为什么我的文本字段没有添加到页面中？

在输入表单标记中使用 onclick 属性时 JavaScript 未捕获引用错误

javascript - 来自 geojson 的 Openlayers 3 圆不适用于与 TileWMS 不同的图层图 block 源

JavaScript 问题 : How do I duplicate user input into a hidden field?

javascript - 函数参数逻辑错误？

javascript - 为什么我无法在 Javascript 中提取并计算用户表单输入？

html - 无法分离元素无序列表和按钮

json - 使用 symfony 形式编辑 json_array 字段

©2024 IT工具网  联系我们