React Day Picker 사용기

설치

1
npm install react-day-picker date-fns

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';

import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css'

export default function Example() {
const [selected, setSelected] = React.useState<Date>();

let footer = <p>Please pick a day.</p>;
if (selected) {
footer = <p>You picked {format(selected, 'PP')}.</p>;
}
return (
<DayPicker
mode="single"
selected={selected}
onSelect={setSelected}
footer={footer}
/>
);
}
  • toDate 프로퍼티로 지정한 날짜까지만 노출되도록 할 수 있다.
  • class를 주어서 선택 불가능하도록 스타일링을 줄 수 도 있다.
  • React state를 사용하여 상태를 다루기 용이하다.

댓글 공유

  • page 1 of 1

loco9939

author.bio


author.job