如何防止在 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.