material-ui 날짜 선택기를 사용할 수 없습니다.
무슨 이유인지 자재유이 날짜 선택기가 작동하지 않습니다.날짜 선택기가 React에 렌더링될 때마다 다음 오류가 발생합니다.
범위 오류:형식 문자열에 이스케이프되지 않은 라틴 알파벳 문자가 포함되어 있습니다.
n
datepicker(https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js))만으로 stackblitz를 작성했는데, 거기에도 에러가 표시됩니다.내가 뭘 잘못하고 있지?설치 안내서의 지시사항을 모두 따랐던 것 같습니다.
material-ui/pickers 링크:https://material-ui-pickers.dev/
저도 같은 문제가 있었는데, GITHUB에서 이걸 발견했어요.
https://github.com/mui-org/material-ui-pickers/issues/1440 그래서 @date-io/date-fns: "^1.3.13"을 설치해서 작동시켰습니다.
패키지 다운그레이드 대상@date-io@^1.3.13
npm i @date-io/date-fns@1.3.13
위의 답변을 시도했지만 효과가 없었습니다.앞의 답변이 효과가 없으면 완전히 다운그레이드해야 합니다.
npm install @material-ui/pickers@3.2.8
npm install @date-io/date-fns@1.3.13
npm install date-fns@2.8.1
모멘트를 사용하다npm i @date-io/modent@1.x 모멘트
import MomentUtils from '@date-io/moment';
function App() {
return (
<MuiPickersUtilsProvider utils={MomentUtils}>
material-ui-pickers의 예에서는 다음과 같은 종속성 버전이 사용되고 있는 것 같습니다(사용자와는 다릅니다).
"@date-io/date-fns": "1.0.1",
"material-ui-pickers": "2.1.1",
이 예에서는 새로운 버전의 @date-io와 사용되지 않는 버전의 material-ui-picker를 사용하고 있습니다.
"@date-io/date-fns": "2.0.1",
"@material-ui/pickers": "3.2.8",
(1) 예시와 일치하도록 버전을 설정하거나 (2) 최신 material-ui-pickers 버전을 사용하여 DateFnsUtils 대신 커스텀 함수를 사용하여 날짜 형식을 수행할 수 있습니다.
이게 도움이 됐으면 좋겠다.
를 인스톨 할 필요가 있습니다.
npm i @date-io/date-fns@1.x date-fns
공식 사이트.https://material-ui-pickers.dev/getting-ui-installing에서 다음 지침을 따릅니다.
이 문제를 일으킨 것은 수입 명세서의 순서뿐이었습니다.다음 사항을 확인합니다.
import 'date-fns'
; Import 전import DateFnsUtils from '@date-io/date-fns'
;
예
import 'date-fns'
import DateFnsUtils from '@date-io/date-fns';
material ui pickers v3가 @date-io와 충돌하기 때문에 공식 사이트를 방문하실 수 있습니다.
중요:material-ui-picker v3의 경우 v1.x 버전의 @date-io 어댑터를 사용합니다.
@date-io@2 를 인스톨 했기 때문입니다.* 에러가 표시될 수 있습니다.
수집되지 않은 범위 오류:형식 문자열에 이스케이프되지 않은 라틴 알파벳 문자가 포함되어 있습니다.n
@date-io@^1.3.13으로 다운그레이드해야 합니다.
downgrade@date.io/date-fns는 필요 없습니다.https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md에 기재되어 있는 대로 날짜 형식을 올바르게 지정해 주세요.
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid item>
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
label="Date picker dialog"
views={['year', 'month', 'date']}
value={selectedDate}
format="dd/MM/yyyy"
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</Grid>
</MuiPickersUtilsProvider>
반응
저를 좋아하셔서 포장지를 만드셨다면 다른 소품도 확인해 보세요.해서 이 했습니다.Date.now()
받침으로 할 수 의 라벨 받침, 라벨 받침, 라벨 과는 관계가 수 있습니다.format
★★★★★★★★★★★★★★★★★」@date.io/date-fns
여기에 제시된 바와 같이 material-ui-pickers v3와 함께 v1.x 버전의 @date-io 어댑터를 사용합니다.
일이 요.undefined
형식 문자열로 지정합니다.로 합격하지하세요.undefined
형식 문자열로 지정합니다.
언급URL : https://stackoverflow.com/questions/59600125/cannot-get-material-ui-datepicker-to-work
'programing' 카테고리의 다른 글
오류 처리 방법 fetch()의 비동기/대기 (0) | 2023.04.02 |
---|---|
Visual Composer에서 AJAX 콘텐츠 로드 사용 안 함 (0) | 2023.04.02 |
자바스크립트 내부대체가 아닌 HTML 추가 (0) | 2023.04.02 |
JSON 잘못된 UTF-8 중간 바이트 (0) | 2023.04.02 |
리액트에서의 코멘트 사용방법 (0) | 2023.03.28 |