material-ui 날짜 선택기를 사용할 수 없습니다.

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