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:

npm install react-datepicker

Langkah 3: Import react-datepicker

Import komponen yang diperlukan ke dalam komponen React anda:

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Langkah 4: Melaksanakan Picker Tarikh

inilah cara menggunakan

dalam komponen berfungsi dengan cangkuk: react-datepicker

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 (
     setSelectedDate(date)}
    />
  );
};

export default MyDatePicker;

Dan inilah yang bersamaan untuk komponen kelas:

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 (
      
    );
  }
}

export default MyDatePicker;

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:

<DatePicker
  selected={selectedDate}
  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
/>

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!