如何在react 中使用日期范围（详细指南）

日期范围是一个npm包，让我们在网站上使用和显示现代的日历窗口。设置Date-Range的步骤如下

第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/yyyy")}。}

上述方法只创建了静态日历窗口。如果我们想在点击时打开日期范围，那么添加以下代码。

第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