html date form: how to set start date as tomorrow using Javascript

Question

Trying to limit the start date as tomorrow (local date). Can someone tell why below code isn't working:

  <form method="POST">
       <div>
            <label for="s2">pickup_date</label>
            <input type = 'date'  name='pickup_date' required>
         <br /><br />
        </div>
  </form>

    <script>
                var time = new Date();
                var localTimeStr = time.toLocaleString('en-US', { timeZone: 'Asia/Shanghai' });
                today = new Date(localTimeStr)
                tomorrow = new Date(today.setDate(today.getDate() + 1)).toISOString().split('T')[0];
                t = String(tomorrow)
                document.getElementsByName("pickup_date")[0].setAttribute('min', t);
    </script>

the output of below code is 2022-01-18:

  var time = new Date();
                var localTimeStr = time.toLocaleString('en-US', { timeZone: 'Asia/Shanghai' });
                today = new Date(localTimeStr)
                tomorrow = new Date(today.setDate(today.getDate() + 1)).toISOString().split('T')[0];
                t = tomorrow.split('-')[0]+'-'+tomorrow.split('-')[1]+'-'+tomorrow.split('-')[2]
                console.log(t)

however, the calendar start date in the form is still 2022-01-17. But, when I manually set

document.getElementsByName("pickup_date")[0].setAttribute('min', '2022-01-18');

the calendar start from 2022-01-18 correctly. why!

*.toISOString* returns the UTC date which, given the way you're setting the date and that the host offset is likely positive, gives the date for the previous day. Also see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) — RobG, Jan 16 '22 at 20:49

score 1 · Accepted Answer · answered Jan 16 '22 at 22:48

In the OP there is:

var time = new Date();
var localTimeStr = time.toLocaleString('en-US', { timeZone: 'Asia/Shanghai' });
today = new Date(localTimeStr)

That will return a timestamp with the date and time for Shanghai.

tomorrow = new Date(today.setDate(today.getDate() + 1)).toISOString().split('T')[0];

That will firstly parse the string assigned to today as "local" to the host system using the built–in parser, which it is not required to do by ECMA-262 (see Why does Date.parse give incorrect results?).

It will then return an ISO 8601 formatted string for the equivalent UTC date and time. If the host system's offset is positive, then depending on the time in the timestamp, the date will either be the same day or the previous day. Similarly, for hosts with a negative offset, the date might be the same day or the following day depending on the time in the string and the host system's offset.

There are many questions on formatting dates, the various toLocaleString methods are useful but I don't know how reliable they are in the long term. To get an ISO 8601 formatted local date, the format associated with the language en-CA seems to suit:

new Date().toLocaleDateString('en-CA')

If you want to get timestamps for the current date and tomorrow in Shanghai in YYYY-MM-DD format, consider:

let d = new Date();
let today = d.toLocaleDateString('en-CA', {timeZone:'Asia/Shanghai'});
d.setDate(d.getDate() + 1);
let tomorrow = d.toLocaleDateString('en-CA', {timeZone:'Asia/Shanghai'});

console.log(`Today   : ${today}\nTomorrow: ${tomorrow}`);

html date form: how to set start date as tomorrow using Javascript

1 Answers1