主日期輸入控制項：停用 HTML 表單中的過去日期

在處理要求使用者選擇日期的表單時，您通常需要阻止他們選擇過去的日期，尤其是在預約或預訂等場景中。這是許多應用程式中的常見要求，幸運的是，HTML 和 JavaScript 提供了一種簡單的方法來處理此問題。

HTML 日期輸入

; type="date" 的元素允許使用者輕鬆選擇日期。但是，預設情況下，使用者可以選擇任何日期，包括過去的日期。若要限制使用者選擇當天之前的日期，您可以將 min 屬性與 JavaScript 結合使用。

HTML 日期輸入範例

這是一個簡單的日期輸入範例：

<input type="date" id="reservationDate" name="reservationDate" />

禁用過去的日期

為了防止使用者選擇過去的日期，您需要設定 的 min 屬性場地。 min 屬性指定可以選擇的最小日期。

您可以使用 JavaScript 的 Date 物件動態設定目前日期，將其格式化為所需的 YYYY-MM-DD 格式，並將其套用至 min 屬性。

在 React 中實現

對於 React 用戶，以下是將其整合到 TextField 元件中的方法：

import { TextField } from "@mui/material";
import { Field } from "formik";

const ReservationDateField = ({ touched, errors }) => {
  return (
    <Field
      as={TextField}
      label="Reservation Date"
      type="date"
      name="reservationDate"
      fullWidth
      margin="normal"
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputProps: {
          min: new Date().toISOString().split("T")[0], // Disable past dates
        },
      }}
      error={touched.reservationDate && Boolean(errors.reservationDate)}
      helperText={touched.reservationDate && errors.reservationDate}
    />
  );
};

分解：

• 日期格式：new Date().toISOString().split("T")[0] 以 YYYY-MM-DD 格式給出今天的日期，這是 min 屬性所必需的。
• min 屬性：這確保使用者只能選擇從今天開始的日期。

為什麼這很重要？

限制過去的日期對於管理未來事件的表單至關重要，例如：

• 預約。
• 安排送貨。
• 設定未來提醒。

它透過防止無效的日期選擇來改善使用者體驗並降低使用者錯誤的可能性。

結論

停用過去的日期是改善表單的簡單而有效的方法。無論您是初學者還是經驗豐富的開發人員，應用此技術都可以確保您的用戶不會意外選擇錯誤的日期。這個小步驟可以對應用程式的可用性產生很大的影響。

以上是主日期輸入控制項：停用 HTML 表單中的過去日期的詳細內容。更多資訊請關注PHP中文網其他相關文章！