Kawalan Input Tarikh Induk: Melumpuhkan Tarikh Lalu dalam Borang HTML

Apabila bekerja dengan borang yang memerlukan pengguna memilih tarikh, anda selalunya perlu menghalang mereka daripada memilih tarikh lalu—terutamanya untuk senario seperti membuat tempahan janji temu atau membuat tempahan. Ini adalah keperluan biasa dalam banyak aplikasi, dan nasib baik, HTML dan JavaScript menyediakan cara mudah untuk mengendalikan perkara ini.

Input Tarikh HTML

<input> elemen dengan type="date" membolehkan pengguna memilih tarikh dengan mudah. Walau bagaimanapun, secara lalai, pengguna boleh memilih mana-mana tarikh, termasuk tarikh yang lalu. Untuk menyekat pengguna daripada memilih tarikh sebelum hari semasa, anda boleh menggunakan atribut min bersama-sama dengan JavaScript.

Contoh Input Tarikh HTML

Berikut ialah contoh input tarikh ringkas:

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

Melumpuhkan Tarikh Lalu

Untuk menghalang pengguna daripada memilih tarikh lalu, anda perlu menetapkan atribut min bagi <input type="date"> padang. Atribut min menentukan tarikh minimum yang boleh dipilih.

Anda boleh menetapkan tarikh semasa secara dinamik menggunakan objek Tarikh JavaScript, formatkannya kepada format YYYY-MM-DD yang diperlukan dan gunakannya pada atribut min.

Pelaksanaan dalam React

Untuk pengguna React, berikut ialah cara anda boleh menyepadukan ini ke dalam komponen 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}
    />
  );
};

Pecahan:

• Pemformatan Tarikh: new Date().toISOString().split("T")[0] memberikan tarikh hari ini dalam format YYYY-MM-DD, yang diperlukan untuk atribut min.
• Atribut min: Ini memastikan pengguna hanya boleh memilih tarikh mulai hari ini dan seterusnya.

Mengapa Ini Penting?

Mengehadkan tarikh lalu adalah penting dalam bentuk yang mengurus acara masa hadapan seperti:

• Tempah janji temu.
• Jadualkan penghantaran.
• Menetapkan peringatan masa hadapan.

Ia meningkatkan pengalaman pengguna dengan menghalang pemilihan tarikh yang tidak sah dan mengurangkan kemungkinan ralat pengguna.

Kesimpulan

Melumpuhkan tarikh lalu ialah cara yang mudah tetapi berkesan untuk menambah baik borang anda. Sama ada anda seorang pemula atau pembangun berpengalaman, menggunakan teknik ini memastikan pengguna anda tidak memilih tarikh yang salah secara tidak sengaja. Langkah kecil ini boleh membuat perbezaan besar dalam kebolehgunaan aplikasi anda.

Atas ialah kandungan terperinci Kawalan Input Tarikh Induk: Melumpuhkan Tarikh Lalu dalam Borang HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!