Rumah >hujung hadapan web >tutorial js >Petua Pantas: Membuat pemetik tarikh dalam React
, 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
<code class="language-bash">npm install react-datepicker</code>
Langkah 3: Import react-datepicker
<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
dateFormat
minDate
: Tetapkan tarikh minimum dan maksimum yang boleh dipilih. maxDate
inline
withPortal
<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
Atas ialah kandungan terperinci Petua Pantas: Membuat pemetik tarikh dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!