반응에서 날짜 범위를 사용하는 방법은 무엇입니까?

Date-Range는 npm 패키지로 웹사이트에서 현대적으로 보이는 달력 창을 사용하고 표시할 수 있습니다. 날짜 범위를 설정하려면 다음 단계를 따르세요.

1단계: 먼저 패키지를 설치합니다npm i react-date-range.

2단계: 구성 요소 파일의 CSS 파일과 함께 캘린더 가져오기

import { Calendar, DateRange } from 'react-date-range'
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

3단계: 캘린더에 대한 useState를 만듭니다.

import React, { useState } from 'react'

const [date, setDate] = useState([
  {
    startDate: new Date(),
    endDate: new Date(), // Use null if you don't want to have endDate
    key: 'selection'
  }
])

4단계: 숫자도 추가해야 합니다npm add date-fns.

5단계: CSS를 사용하여 배치할 className이 있는 다음 구성 요소를 추가합니다. 참고: 소품 이름은 3단계에서 생성한 것과 동일해야 합니다. const [date, setDate] = useState

<DateRange editableDateInputs={true} onChange={(item) => setDate([item.selection])} moveRangeOnFirstSelection={false} ranges={date} className="date" />

6단계: 선택한 날짜를 'date-fns' 가져오기 형식으로 표시하려면
import { format } from 'date-fns';
7단계: 선택한 날짜를 표시하려면
{ ${format(date[0].startDate, "MM/dd/yyyy")}에서 ${format(date[0].endDate, "MM/dd/yyy")}까지}
위의 방법은 정적 캘린더 창만 생성합니다. 클릭시 날짜 범위를 열려면 다음 코드를 추가하십시오.

8단계: useState 후크를 만들어 캘린더 창을 열고 닫습니다.
const [openDate, setOpenDate] = useState(false)
9단계: 날짜 구성 요소를 {openDate && <DateRange />}로 래핑하고 onClick={()=>setOpenDate(!openDate)} 설정

최종 코드는 다음과 같아야 합니다.

import React, { useState } from 'react'
import { DateRange } from 'react-date-range'
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { format } from 'date-fns';

const Component = () => {
  const [openDate, setOpenDate] = useState(false)
  const [date, setDate] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
  ])

  return (
    <div className='calendar'>
      <span onClick={ ()=>setOpenDate(!openDate) }>{ `${format(date[0].startDate, "MM/dd/yyyy")} to ${format(date[0].endDate, "MM/dd/yyy") }` }</span>
      { openDate && <DateRange editableDateInputs={ true } onChange={ (item) => setDate([item.selection]) } moveRangeOnFirstSelection={ false } ranges={ date } className="date" /> }
    </div>
  )
}

export default Header