how can i prevent choosing sevral dates in html date input?
Question
Am developing a booking website where people choose checkin and checkout, so let's assume that the chosen room is busy from 20 till 30.
my input would be like
<input id="check_in" name="check_in" type="date" value="" class="form-control" placeholder="Check-in" required min="30" >
am trying to prevent user from choosing bettween 20 and 30
but all i can do in this html tag is preventing from choosing before 30 .
and also am assuming that the room can be busy from 1 to ,and from 20 to 30, how to let user choose bettween 10 and 20 ?
1 answers
solution1
1 2020-01-08 12:31:33
Either you can use this...
<input type="date" min="2020-01-01" max="2020-01-19"/>
or if that doesn't works, below is the setup to restrict the date, you can change it dynamically by setting max and min value in 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.