JavaScript 日期 UTC datetime-local

Question

我有一个表单，用户可以在其中使用输入格式 datetime-local 设置日期和时间。提交表单时，开始日期出现错误“值必须 11:52 AM 或更早”。我的当地时间是 13:52。我必须 select -2 小时。我怎样才能解决这个问题？

表格的开始日期仅限于今天 select 并且持续 72 小时，结束时间也相同。

<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>

我也有一张图：

Answer 1

您的问题与时区有关。因为您正在使用 toISOString 来设置输入值，所以它被设置为 UTC 日期和时间，而不是本地时间。因此，创建一个函数以 return 正确格式的本地时间。

例如

// 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>

设置输入值属性意味着如果输入在一个表单中并且被重置，它们将return适当地设置为最小值和最大值。

JavaScript 日期 UTC datetime-local

JavaScript Date UTC datetime-local

javascript

forms

jquery

datetime

datetime-local