[React] Date picker 사용하기 ( + default 값으로 오늘 날짜)

날짜

 

new Date(); 로 오늘 날짜 현재 시간을 구한 후

문자열로 변환해 날짜에 해당하는 부분만 슬라이싱 해 오늘 날짜를 defaultValue로 한다.

saleStartDate 역시 default 값을 오늘 날짜로 한다.

 

src/pages/SalesRegistrationPage.js

  const dateNow = new Date();
  const today = dateNow.toISOString().slice(0, 10);
  const [saleStartDate, setSaleStartDate] = useState(today);

 

Date picker

 

src/pages/SalesRegistrationPage.js return()

              <TextField
                id="date"
                label="판매 시작일"
                type="date"
                defaultValue={today}
                onChange={(e) => setSaleStartDate(e.target.value)}
                inputProps={{ min: today }}
                InputLabelProps={{
                  shrink: true,
                }}
              />

 

defaultValue 

• 오늘 날짜

type

• date : 날짜
• time : 시간
• datetime-local : 날짜 + 시간

type을 위 세가지 중 하나를 선택하면 아이콘에서 type에 맞게 선택할 수 있다.

 

datapicker에서 다른 날짜를 선택하면 onChage에서 setSaleStartDate로 saleStartDate를 업데이트한다.

 

inputProps

• min 을 오늘 날짜로 지정해 오늘 이전 날짜는 선택할 수 없도록 했다.

 

 

실행 화면

 

 

 

 

 

 

 

참고 : 

https://mui.com/x/react-date-pickers/getting-started/

https://codesandbox.io/s/l2wry?file=/src/App.tsx