[위코드] TIL(Today I am Learned) -30(기업협업)(Datepicker 중간)

- 오늘의 할일.

React Datepicker 커스텀하기.

남은 포인트 설정하기.

 

DatePicker를 커스텀하는 중.

특정일자로 datepicker를 설정하려고 하는데,

jQUERY와 다르게 react라서 헤맸다.

원래는 jQUERY에선 그냥 "2019-12-31"만 적으면 되는데

DATEPICKER는 날짜만 기입되면 안되고, 해당 날짜 앞에 new Date("날짜") 쳐야 작동하는 것....

<DatePicker
                selected={startDate}
                onChange={date => setStartDate(date)} 
                selectsStart
                startDate={startDate}
                endDate={endDate}
                minDate={new Date("1925-12-31")}
                maxDate={new Date("2019-12-31")}
                dateFormat="yyyy-MM-dd"
                onKeyDown={(e) => e.preventDefault()}
              />
              <DatePicker
                selected={endDate}
                onChange={date => setEndDate(date)}
                selectsEnd
                startDate={startDate}
                endDate={endDate}
                changeMonth="true"
                changeYear="true"
                minDate={new Date("1925-12-31")}
                maxDate={new Date("2019-12-31")}
                dateFormat="yyyy-MM-dd"
                onKeyDown={(e) => e.preventDefault()}
              />

 

아직은 월,년도가 안되서 헤매고 있는데, 다시 정리할 생각이다.

관련된 정보를 찾는데 도움을 준 자료의 링크.

http://www.turfrain.co.kr/TRpackage/jqueryPlugin/demo/jQueryUI/datepicker/default.html?dep1=7&dep2=1

jqueryUI datepicker | TR package

https://stackoverflow.com/questions/55626272/react-datepicker-accepting-older-dates-those-are-disabled-using-mindate-property

react-datepicker accepting older dates those are disabled using minDate property

https://reactdatepicker.com/

React Datepicker crafted by HackerOne