JavaScript Date UTC datetime-local

Question

I have a form where user can set a date and time with input format datetime-local. When the form is submitted an error appears for the start-date "Value must 11:52 AM or earlier". My local time is 13:52. I have to select -2 hours. How can I remove this problem?

The form is limited for the start date to select only today and last 72 hours, same for end time.

<input type="datetime-local" name="start_timestamp" id="start_timestamp" required> <input type="datetime-local" name="end_timestamp" id="end_timestamp" required> <script> //Do not let to select END-TIME and START TIME in the PAST var today = new Date(); var past = new Date(today.setDate(today.getDate() - 3)).toISOString().slice(0, 16); var today = new Date().toISOString().slice(0, 16); document.getElementsByName("start_timestamp")[0].min = past; document.getElementsByName("start_timestamp")[0].max = today; </script> <script> var today = new Date(); var future = new Date(today.setDate(today.getDate() + 3)).toISOString().slice(0, 16); var today = new Date().toISOString().slice(0, 16); document.getElementsByName("end_timestamp")[0].min = today; document.getElementsByName("end_timestamp")[0].max = future; </script>

I have an image also:

You're setting it to the UTC date and time due to toISOString, set it to local values instead. Perhaps see Javascript date format like ISO but local. — RobG
– RobG, Commented Feb 25, 2022 at 23:21

RobG · Accepted Answer · 2022-02-28 13:30:36Z

Your issue is timezone related. Because you're using toISOString to set the input value, it's being set to UTC date and time, not local. So create a function to return the local time in the correct format.

E.g.

// Format date as YYYY-MM-DDTHH:mm in local timezone // to use to set min and max values for inputs function toISOLocal(date = new Date()) { return date.toLocaleString('sv').slice(0,-3).replace(' ','T'); } /* Initialise date inputs to local dates ± perid in days * Start is set to "now", end it set to now ± period * @param {string} startID * @param {string} endID * @param {number} period - ±days from start to end */ function initialiseDateInputs(startID, endID, period) { let startEl = document.querySelector('#' + startID); let endEl = document.querySelector('#' + endID); // Ensure elements exist if (!startEl || !endEl) return; // Create min and max timestamps let d = new Date(); // Create max with zero'd seconds, milliseconds let minD = toISOLocal(new Date(d.setSeconds(0,0))); // Create min ±period days from max let maxD = toISOLocal(new Date(d.setDate(d.getDate() + period))); // If period is -ve, swap max and min if (period < 0) { [minD, maxD] = [maxD, minD]; } // Set element attribute values startEl.setAttribute('max', maxD); startEl.setAttribute('min', minD); startEl.setAttribute('value', period < 0? maxD : minD); endEl.setAttribute('max', maxD); endEl.setAttribute('min', minD); endEl.setAttribute('value', period < 0? minD : maxD); } // Run when elements should exist window.onload = () => { initialiseDateInputs('startDate', 'endDate', +3); }

.screenTip { font-family: sans-serif; color: #bbbbbb; } input { font-size: 150%; }

<form> <span class="screenTip">Start date and time, must be within last 3 days</span><br> <input type="datetime-local" name="startDate" id="startDate" required><br> <span class="screenTip">End date and time, must be within last 3 days</span><br> <input type="datetime-local" name="endDate" id="endDate" required><br> <input type="reset"> </form>

Setting the input value attribute means that if the inputs are in a form and it's reset, they'll return to the min and max values appropriately.

Thx for the help and for the explanation now I understood my mistake . It solved my issue :D
is there a way to set end date to now and + 3 days, and don't allow past dates? Thx

Collectives™ on Stack Overflow

JavaScript Date UTC datetime-local

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related