[22.05.26] TIL

Calender 닫기, 적용 버튼

react-datepicker 라이브러리를 활용해 datetime picker를 구현했다.
range 적용시 data에 바로 반영되지 않게 닫기와 적용 버튼을 구현했다.

react-datepicker 옵션
shouldCloseOnSelect={false}
inline

  const [startDate, setStartDate] = useState(new Date('2022-04-14'))
  const [endDate, setEndDate] = useState(new Date('2022-04-20'))
  const [isOpen, setIsOpen] = useState(false)

캘린더 열기, 닫기

• start, end date를 전역 상태에서 가져와 set
• isOpen(prev => !prev)

적용

• 기존 onChange에서 start, end date 값을 전역상태로 저장
  -> 적용 버튼에서 전역 상태 저장
• isOpen(false)

range 선택시 end date 선택 전 invalid date로 나오는 문구 수정

const getDateString = (date: Date | string) => {
  if (!date) return ''

  return dayjs(date).format('YYYY년 MM월 DD일')
}

객체 배열 value 더하기

const filterTrendData = (range: string[]) => {
  const filteredData = TREND_DATE.report.daily.filter((data) => range.includes(data.date))

  return filteredData
}

const addValue = (date: string[], title: string) => {
  const filteredData = filterTrendData(date)
  const dataArray = filteredData.map((data) => findTargetValue(title, data))
  const totalValue = dataArray.reduce((prev, cur) => getPlus(prev, cur), 0)

  return totalValue
}

날짜가 일치하는 data filter
각 key의 value로 새로운 배열 생성
reduce 메소드로 더하고 리턴

더 좋은 방법이 있으면 알려주세요...

배포주소