Framework/React

[React] DatePicker RangeError: Invalid time value safari ์˜ค๋ฅ˜

yuri lee 2023. 3. 1. 14:03
๋ฐ˜์‘ํ˜•

Intro

์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฆฌ์•กํŠธ์—์„œ DatePicker๋กœ Date ๊ฐ์ฒด๋ฅผ ๋‹ค๋ฃจ๋˜ ๋„์ค‘ ํ•ด๋‹น ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. 

 

RangeError: Invalid time value 

 

๋กœ์ปฌ PC ํฌ๋กฌ ํ™˜๊ฒฝ์—์„œ ํ…Œ์ŠคํŠธ ํ–ˆ์„ ๋•Œ๋Š” ๋‚˜์ง€ ์•Š์•˜๋˜ ์˜ค๋ฅ˜์˜€๊ณ , IOS ์›น์•ฑ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋˜ ๋„์ค‘ ๋ฐœ๊ฒฌํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ์ €๋Š” ex) 2023.03.01 ํ˜•ํƒœ์˜ ์ŠคํŠธ๋ง ๋ฌธ์ž๋ฅผ new Date๋กœ ๋ณ€ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค. 

 

Why?

ํฌ๋กฌ์€ dot(.)ํ˜•์‹์„ ํฌํ•จํ•˜๋Š” ๋ฌธ์ž์—ด์„ new Date๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์ง€๋งŒ, ์‚ฌํŒŒ๋ฆฌ์˜ ๊ฒฝ์šฐ date ๋ณ€ํ™˜ ์‹œ format์— dot(.)๋ฅผ ํฌํ•จํ•  ๊ฒฝ์šฐ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

How to solve the problem

ํ•ด๋‹น ์—๋Ÿฌ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ์š”. ์ €๋Š” ์•„๋ž˜์˜ ์ฝ”๋“œ๋กœ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. moment.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ toDate()๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•ด์คฌ์Šต๋‹ˆ๋‹ค. 

const myDate = moment(str, 'YYYY-MM-DD').toDate();

 

 


https://github.com/date-fns/date-fns/issues/2130

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_date

๋ฐ˜์‘ํ˜•