ホームページ > 記事 > ウェブフロントエンド > マスター日付入力コントロール: HTML フォームでの過去の日付の無効化
ユーザーが日付を選択する必要があるフォームを操作する場合、特に予定の予約や予約の作成などのシナリオでは、ユーザーが過去の日付を選択できないようにする必要があることがよくあります。これは多くのアプリケーションで共通の要件であり、幸いなことに、HTML と JavaScript はこれを処理する簡単な方法を提供します。
type="date" の要素を使用すると、ユーザーは日付を簡単に選択できます。ただし、デフォルトでは、ユーザーは過去の日付を含む任意の日付を選択できます。ユーザーが当日より前の日付を選択できないようにするには、JavaScript と組み合わせて min 属性を使用します。
簡単な日付入力の例を次に示します:
<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 中国語 Web サイトの他の関連記事を参照してください。