Solution 1 :

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 () {          

                minValue: new Date(2020, 0, 1),
                maxValue: new Date(2020, 0, 19),
                dateDisplayFormat: "yy/MM/dd dddd"
<!DOCTYPE html>
    <!-- Ignite UI Required Combined CSS Files -->
    <link href="" rel="stylesheet" />
    <link href="" rel="stylesheet" />
        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;

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src=""></script>
    <script src=""></script>
    <div class="group-fields clearfix">
            <label for="departure">Please enter date between 1 Jan to 19 Jan 2020</label>
            <input id="departure" />

Problem :

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 ?


Comment posted by Sam Leurs

you’ll probably need some JS to check if the selected date is between 20 and 30 (and if so, reject it). This is not possible with pure HTML I think.

Comment posted by Disable certain dates from html5 datepicker

Does this answer your question?

Comment posted by Reporter

@yesterday The questioner added the javascript tag. I think is conscious abaut using Javascript.

Comment posted by Mohamad Alasly

@Natrium thank you for helping, but no it’s not my question! i want to prevent a sevral dates not only one

Comment posted by Mohamad Alasly

@Natrium bro this question was asked 6 years ago, i read it