Rumah >hujung hadapan web >tutorial js >Petua Pantas: Membuat pemetik tarikh dalam React

Petua Pantas: Membuat pemetik tarikh dalam React

Jennifer Aniston
Jennifer Anistonasal
2025-02-08 11:12:101021semak imbas

Quick Tip: Creating a Date Picker in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn