日期轉換導致時區問題

我正在嘗試獲取功能 - 如果用戶輸入的日期小于當前日期，我需要在螢屏上顯示錯誤訊息，我實作了以下代碼，該代碼在我的本地系統日期中運行良好，但在其他時區中不起作用. 任何人都可以幫助得到這個。

我只需要使用 javascript 或 jquery。我不應該使用其他庫。

dateFormat = function(value, event) {
        let newValue = value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');
        const dayOrMonth = (index) => index % 2 === 1 && index < 4;
        // on delete key.  
        if (!event.data) {
            return value;
        }
        return newValue.split('').map((v, i) => dayOrMonth(i) ? v   '/' : v).join('');
}
    
    
    checkStart = function(value) {
        var newDate = new Date().toISOString();
        var inputDate = new Date(value).toISOString();

        var today = new Date(newDate).setHours(0,0,0,0);
        var userDate = new Date(inputDate).setHours(0,0,0,0);

        if(userDate < today) {
            $('#error-msg3').show();
            $('#startDate').val('');
        } else {
            $('#error-msg3').hide();
        }
}

<input type="tel" maxlength="10" id="startDate" name="startDate" placeholder="mm/dd/yyyy"
                            oninput="this.value = dateFormat(this.value, event)" onblur="checkStart(this.value)" required/>
                
                <span id="error">Start date should not be lesser than the current date.</span>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

uj5u.com熱心網友回復：

服務器和資料庫可能在不同的時區上運行（首選 UTC ），當您將日期作為字串發送時，那里沒有任何時區，而只是一個字串。

嘗試將其作為時間戳或 UTC 日期字串發送， 以便服務器和資料庫自動將其轉換為他們的時區并存盤。并且當任何用戶從其他時區獲取它時，它會自動轉換為他們的時區（但您存盤的字串將在任何地方都被視為字串）

let d = new Date()
console.log(d.getTime()) 

//or get utc string
console.log(d.toUTCString())

將此值發送到您的服務器 (API)

uj5u.com熱心網友回復：

您的代碼完全在客戶端上運行，因此時區無關緊要。

在OP中有：

var newDate = new Date().toISOString();
...
var today = new Date(newDate).setHours(0,0,0,0);

Date 到 string 到 Date 到數字的轉換是低效和不必要的。以下是等效的：

let today = new Date().setHours(0,0,0,0);

同樣對于inputDate：

var inputDate = new Date(value).toISOString();
...
var userDate = new Date(inputDate).setHours(0,0,0,0);

相當于：

let userDate = new Date(value).setHours(0,0,0,0);

所有計算都是本地的，因此時區無關緊要。另請參閱為什么 Date.parse 給出不正確的結果？

嘗試使用腳本控制用戶輸入總是令人擔憂，因為在許多情況下撰寫代碼是不可能的或不切實際的。使用電話輸入日期就是一個例子。通過使用日期輸入并將最小值設定為今天，可以避免整個問題。然后用戶不能選擇今天之前的日期，你的問題就解決了，例如

window.onload = function() {
  let dateEl = document.getElementById('dateInput');
  dateEl.min = new Date().toLocaleString('en-CA', {year:'numeric', month:'2-digit', day:'2-digit'});
}

<input id="dateInput" type="date">

如果您將用戶發送的日期與服務器上的日期進行比較，則用戶系統時鐘準確性和時區可能是一個問題，但這在 OP 中沒有解釋。

如果這是一個問題，那么您需要就該特定主題提出另一個問題。

如果您真的想手動控制輸入日期并在選擇無效日期時顯示錯誤訊息，請決議日期輸入中的值并將其與今天的開始進行比較，然后從那里開始：

// Parse YYYY-MM-DD as local
function parseYMDLocal(s) {
  let [Y, M, D] = s.split(/\D/);
  return new Date(Y, M-1, D);
}

// Check if date in YYYY-MM-DD format is before today
function isBeforeToday(d) {
  return parseYMDLocal(d) < new Date().setHours(0,0,0,0);
}

function checkValue() {
  let errEl = document.getElementById('errEl');
  errEl.textContent = '';
  console.log(typeof this.value);
  if (isBeforeToday(this.value)) {
    errEl.textContent = 'Date must be today or later';
  } else {
    // do something else
  }
}

window.onload = function() {
  document.getElementById('dateInp').addEventListener('blur', checkValue, false);
}

#errEl {color: red}

<input id="dateInp" type="date"><span id="errEl"></span>

標籤：javascript 查询 日期 时区

上一篇：關于jquery點擊添加CSS等元素洗掉CSS。怎么做？

下一篇：插入按鈕后按鈕單擊功能將不起作用