0
408
VistasJavaScript Date UTC datetime-local
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:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta