Input date, current day, next day,

Hi,
I have a form with two INPUT DATES. It’s for a hotel. One input date for IN and one input date for OUT.
What I want is to restrict the selection of the date for IN, for the next day.
Example. Today is february 08th. If the user see this input date, he will be able to select from February 09th. onwards, that means from the NEXT DAY. So which scripts can I use for that?
It’s not just for today/tomorrow. I look for something automatic. I guess something of “var… today… or current day?” So, even when the user see this form on july 26th. he will be able to select the date from july 27th.

And for the input date for OUT, the user should be able to select only from TWO DAYS after the current day. SO, if today is feb. 08th. Minimum his OUT date should be feb. 10th. as a minimum date.

Thanks a lot. :hear_no_evil:

If you’re ever hand-rolling time or date handling you should stop and look for a library that can handle it for you

It’s really easy to mess up in very subtle ways

I would caution against locking people out of booking a fixed number of days as well, for the case where someone looks at the site shortly after midnight, though I don’t know your booking system of course

I’d consider using something like moment.js for this

Lucky for you,. I wanted to see how long it would take me to make this:

html
<div class="container"></div>

css

input:invalid {
    border: 2px solid red;
    position: relative;
    overflow: initial;
}

input:invalid::after {
    content: "Invalid Date";
    position: absolute;
    bottom: -20px;
}

javascript

(function(){

    const createDateInput = (name, min) => {

        const input = document.createElement('input');

        input.name  = name;
        input.min   = min;
        input.type  = 'date';
        input.value = min;

        return input;
    };

    const date          = new Date();
    const currentDate   = date;

    const dateString = (date) => {
        return new Date(date.getTime() - (date.getTimezoneOffset() * 60000 )).toISOString().split("T")[0];
    };

    const nextDay = (date) => {
        date.setDate(date.getDate() + 1);
        return date;
    };

    const twoDaysAfter = (date) => {
        date.setDate(date.getDate() + 2);
        return date;
    };
    
    const nextDayStrFormat      = dateString(nextDay(currentDate));
    const twoDaysAfterStrFormat = dateString(nextDay(currentDate));

    const dateIn    = createDateInput('in', nextDayStrFormat);
    const dateOut   = createDateInput('out', twoDaysAfterStrFormat);

    [dateIn, dateOut].forEach((input) => {
        document.querySelector('.container').append(input);
    });

});

And of course so you can see it in fiddle…
https://jsfiddle.net/ydhr5gnp/