Petua Pantas: Membuat pemetik tarikh dalam React

Panduan ini menunjukkan cara mengintegrasikan pemetik tarikh ke dalam aplikasi React anda menggunakan perpustakaan

, meningkatkan interaksi pengguna untuk pemilihan tarikh dalam borang atau kalendar. react-datepicker

Langkah 1: Persediaan Projek

Pastikan anda mempunyai projek React. Jika tidak, buat satu menggunakan

. npx create-react-app my-datepicker-app

Langkah 2: Pasang react-datepicker

Pasang perpustakaan melalui terminal anda:

<code class="language-bash">npm install react-datepicker</code>

Langkah 3: Import react-datepicker

Import komponen yang diperlukan ke dalam komponen React anda:

<code class="language-javascript">import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";</code>

Langkah 4: Melaksanakan Picker Tarikh

inilah cara menggunakan

dalam komponen berfungsi dengan cangkuk: react-datepicker

<code class="language-javascript">import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <datepicker selected onchange="{date"> setSelectedDate(date)}
    />
  );
};

export default MyDatePicker;</datepicker></code>

Dan inilah yang bersamaan untuk komponen kelas:

<code class="language-javascript">import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class MyDatePicker extends Component {
  state = { selectedDate: null };

  handleChange = date => {
    this.setState({ selectedDate: date });
  };

  render() {
    return (
      <datepicker selected onchange="{this.handleChange}"></datepicker>
    );
  }
}

export default MyDatePicker;</code>

Langkah 5: Penyesuaian

Menyediakan pilihan penyesuaian yang luas: react-datepicker

• : mengawal format tarikh (mis., "Yyyy/mm/dd"). dateFormat
• , minDate: Tetapkan tarikh minimum dan maksimum yang boleh dipilih. maxDate
• : menjadikan pemetik sebaris dan bukan sebagai jatuh turun. inline
• : Meningkatkan kedudukan dalam susun atur kompleks. withPortal

Contoh penyesuaian:

<code class="language-javascript"><datepicker selected onchange="{date"> setSelectedDate(date)}
  dateFormat="MM/dd/yyyy"
  minDate={new Date()}
  maxDate={addDays(new Date(), 30)} //Example using date-fns to add 30 days
  inline
/></datepicker></code>

ingat untuk memasang

jika anda menggunakan date-fns (). addDays npm install date-fns

Pertimbangan Kritikal: Keserasian penyemak imbas: Ujian dengan teliti merentasi pelayar yang berbeza.

• respons: Pastikan paparan optimum pada pelbagai saiz skrin.
• kebolehcapaian: Melaksanakan navigasi papan kekunci dan atribut ARIA untuk kebolehcapaian.
• Pengantarabangsaan: Menyokong pelbagai bahasa dan format tarikh.
• zon waktu: mengendalikan zon waktu dengan betul untuk pengguna global.
• Prestasi: Mengoptimumkan untuk prestasi, terutamanya dengan julat tarikh yang besar.
• Pengurusan Ketergantungan: Pastikan perpustakaan dikemas kini untuk keselamatan dan ciri -ciri baru.
• Dengan mengikuti langkah-langkah ini dan mempertimbangkan perkara-perkara penting ini, anda dapat mengintegrasikan pemetik tarikh yang mesra pengguna dengan berkesan ke dalam aplikasi React anda menggunakan . Ingatlah untuk merujuk dokumentasi
untuk senarai lengkap pilihan dan penggunaan lanjutan.

Atas ialah kandungan terperinci Petua Pantas: Membuat pemetik tarikh dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!