如何防止在 html 日期輸入中選擇幾個日期？
[英]how can i prevent choosing sevral dates in html date input?
問題描述
我正在開發一個人們選擇入住和退房的預訂網站，所以我們假設所選房間從 20 到 30 很忙。
我的輸入會像
<input id="check_in" name="check_in" type="date" value="" class="form-control" placeholder="Check-in" required min="30" >
我試圖阻止用戶在 20 和 30 之間進行選擇
但是我在這個 html 標簽中所能做的就是阻止在 30 之前選擇。
並且假設房間可以從 1 到 20 到 30 很忙，如何讓用戶在 10 和 20 之間進行選擇？
1 個解決方案
解決方案1
1 2020-01-08 12:31:33
要么你可以使用這個...
<input type="date" min="2020-01-01" max="2020-01-19"/>
或者如果這不起作用，下面是限制日期的設置，您可以通過在 javascript 中設置最大值和最小值來動態更改它。
$(function () { $("#departure").igDatePicker({ minValue: new Date(2020, 0, 1), maxValue: new Date(2020, 0, 19), dateDisplayFormat: "yy/MM/dd dddd" }); }); <!DOCTYPE html> <html> <head> <!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css" rel="stylesheet" /> <style> h3 { font-size: 20px; margin-bottom: 20px; } .group-fields { margin-bottom: 10px; } .group-fields label { display: block; line-height: 18px; } .group-fields .inline { display: inline; } .group-fields .ui-igcheckbox-normal { margin-right: 5px; float: left; } .group-fields .ui-igedit-container { width: 230px; } .clearfix:after { content: ""; display: table; clear: both; } .group-fields.clearfix > div { float: left; margin-right: 10px; } </style> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js"></script> </head> <body> <div class="group-fields clearfix"> <div> <label for="departure">Please enter date between 1 Jan to 19 Jan 2020</label> <input id="departure" /> </div> </body> </html>
我如何防止用戶在jQuery UI Date Pickers中禁用日期進行預訂？
[英]How can I prevent users making a booking though disabled dates in jQuery UI Date Pickers?
如何在jQuery中計算日期，並將輸入日期的值設置為？
[英]How can I calculate dates in jQuery, and set an input date's value to that?
設置 minDate 以避免在 html 輸入中選擇開始日期之前的結束日期
[英]set minDate to avoid choosing enddate before start date in html input
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.