在處理要求使用者選擇日期的表單時,您通常需要阻止他們選擇過去的日期,尤其是在預約或預訂等場景中。這是許多應用程式中的常見要求,幸運的是,HTML 和 JavaScript 提供了一種簡單的方法來處理此問題。
; type="date" 的元素允許使用者輕鬆選擇日期。但是,預設情況下,使用者可以選擇任何日期,包括過去的日期。若要限制使用者選擇當天之前的日期,您可以將 min 屬性與 JavaScript 結合使用。
這是一個簡單的日期輸入範例:
<input type="date" id="reservationDate" name="reservationDate" />
為了防止使用者選擇過去的日期,您需要設定 的 min 屬性場地。 min 屬性指定可以選擇的最小日期。
您可以使用 JavaScript 的 Date 物件動態設定目前日期,將其格式化為所需的 YYYY-MM-DD 格式,並將其套用至 min 屬性。
對於 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} /> ); };
限制過去的日期對於管理未來事件的表單至關重要,例如:
它透過防止無效的日期選擇來改善使用者體驗並降低使用者錯誤的可能性。
停用過去的日期是改善表單的簡單而有效的方法。無論您是初學者還是經驗豐富的開發人員,應用此技術都可以確保您的用戶不會意外選擇錯誤的日期。這個小步驟可以對應用程式的可用性產生很大的影響。
以上是主日期輸入控制項:停用 HTML 表單中的過去日期的詳細內容。更多資訊請關注PHP中文網其他相關文章!