時間和日期選擇器 type='datetime-local'

Question

我有兩個文本字段 html 元素分別選擇開始和結束日期/時間。 如何使開始日期/時間小於結束日期/時間？

<v-text-field
  id="setTime"
  outlined
  type="datetime-local"
  label="Start time"
  v-model="plan.start"
>
</v-text-field>

Answer 1

首先，如果沒有開始日期/時間，則必須禁用結束日期/時間條件。 之后，當用戶 select 開始日期/時間然后在驗證檢查結束日期/時間是否小於開始日期/時間返回錯誤時，您也可以在結束日期/時間字段中禁用小於開始日期/時間的天數（閱讀您的日期/時間選擇器庫文檔）

您可以使用 yup 驗證日期時間或手動進行：

如果您的日期/時間是紀元格式，就像這樣

const schema = yup.object({
  fromDate: yup.number().required(),
  toDate: yup.number().moreThan(yup.ref("fromDate")).required(),
});

希望對你有幫助