MUI v5 DatePicker 사용 방법

환경에서 MUI v5 DatePicker를 사용하는 방법에 대해 Tips 방법으로 요약해 보겠습니다.
이번에는 데이지 라이브러리 선정을 시작으로 DatePicker의 기본 사용법을 보도했다.
MUI 가져오기 방법은 다음과 같습니다.
Viste+React+TypeScript는 UI 프레임에서 MUI(v5)를 가져옵니다.
MUI v5 DatePicker 기사 일람표
MUI v5 DatePicker 사용 방법
MUI v5 DatePicker 사용법 2~일본어화~

날짜 라이브러리 선택

먼저 DatePicker에서 사용하는 날짜 라이브러리를 선택합니다.
지원되는 라이브러리는 다음과 같습니다.
Moment.js는 현재 개발을 중지했기 때문에 나머지 3개 중에서 선택하십시오.

date-fns

Day.js

Luxon

Moment.js 지금은 추천하지 않습니다.상세 정보Moment.js ｜ Docs#Project Status

인기순으로 비교

인기 순으로 보면 데이.js는 date-fns가 좋을 것 같아요.
Days.잡지의 인기는 모먼트다.js에서 옮겨온 거의 같은 사용감의 하루.js를 선택한 이유가 있는 것 같습니다.
■ npm trends 다운로드수에 따라 비교
npm trends의 다운로드 수를 비교하면date-fns>Day.js>Luxon의 순서대로 하세요.

■git star 수량으로 비교
gitstar 수로 비교하면 Day.js(38332건)>date-funs(28381건)>luxon(12274건) 순서대로.
■ 일본어 기사의 다양성
일본어 기사도 데이다.루슨 순서대로, 데이.제이스 기사가 많아요.

문법으로 비교하다

실제로 써 보세요. 참고의 알기 쉬운 정도와 쓰기 취향에 따라 비교해 보세요.

1. date-fns

https://date-fns.org/
홈페이지의 참고는 쉽게 알 수 있고 홈페이지의 정보만 사용할 수 있다.
문법은 함수형의 방법으로 간단하고 이해하기 쉽다.
하나하나 사용하는 함수인 import은 번거롭지만, 반대로 어느 라이브러리를 사용하고 있는지 쉽게 알 수 있다.
설치하다.

npm install date-fns

사용 방법
사용할 함수를 하나 이상 사용합니다.

import { format, add, addMonths, getMonth } from 'date-fns'

// 本日日付
const today = new Date()

// 書式を設定
const formatday = format(today, 'yyyy年MM月dd日 HH:mm:ss')
console.log(formatday)

// 年と月を加算
const addday = add(today, {years: 1, months: 2})
console.log(addday)

// 月を加算
const addmonth = addMonths(today, 1)
console.log(addmonth)

// 月を取得（※月は0始まり）
const getmonth = getMonth(today)
console.log(getmonth)

2. Day.js
https://day.js.org/
2.8kB 크기의 가벼운 라이브러리를 번들로 묶습니다.
extend에 핵심 기능인 dayjs에 필요한 플러그인을 추가합니다.
dayjs.DayJs 객체 메소드를 실행하는 데 필요한 기능입니다.
date-fns 함수형의 방법에 대해 Day.js는 대상 유형의 방법이다.
설치하다.

npm install dayjs

사용 방법
우리는 extend에서 필요한 플러그인을 사용할 것입니다.

import dayjs, { extend } from 'dayjs'
import duration from 'dayjs/plugin/duration'

extend(duration)

// 本日日付
const today = dayjs()　

// 書式を設定
const formatday = today.format('YYYY年MM月DD日 HH:mm:ss')
console.log(formatday)

// 年と月を加算
const addday = today.add(dayjs.duration({years: 1, months: 2}))
console.log(addday)

// 月を加算
const addmonth = today.add(1, 'M')
console.log(addmonth)

// 月を取得（※月は0始まり）
const getmonth = today.get('month')
console.log(getmonth)

Luxon
https://moment.github.io/luxon/#/
나는 홈페이지의 참고만으로는 이해하기 어렵다고 생각한다.
설치에 실패했습니다.
설치하다.
typescript의 경우에도 @types/luxon을 설치합니다.

npm install luxon
npm install @types/luxon

사용 방법

import { DateTime } from 'luxon'

const today = DateTime.now()

const formatday = today.toFormat('yyyy年MM月dd日 HH:mm:ss')
console.log(formatday)

const addday = today.plus({years: 1, months: 2})
console.log(addday)


const getmonth = today.month
console.log(getmonth)

채택된 날짜 라이브러리

가장 이해하기 쉬운date-fns를 채택하기로 했습니다.
date-fns는 MUI v5 홈페이지 샘플에서도 사용할 수 있어 안심이 된다.

MUSIv5 DatePicker의 기본 사용 방법

일자 라이브러리 선택은 끝났습니다. 이제 DatePicker 사용법을 살펴보겠습니다.

설치하다.

DatePicker는 Lab 패키지에 포함되어 있으므로 설치@mui/lab합니다.
랩 패키지는 Core 패키지에 포함되지 않은 새 구성 요소를 제공하는 패키지입니다.
코어 패키지와 분리를 통해 코어 패키지보다 더 많은 업데이트가 필요한 랩 패키지를 코어 패키지에 영향을 주지 않으면서 원활하게 업그레이드할 수 있습니다.

npm install @mui/lab

다음에 날짜 라이브러리date-fns와date-fns의 어댑터 패키지를 설치합니다.

npm install date-fns
npm install @date-io/date-fns

DatePicker의 기본 사용 방법

기본 DatePicker 구성 요소
스펀지 패드에 대응해 PC 크기의 화면과 이동 사이즈의 화면에서 동작이 달라진다.
inputFormt에서 입력 형식과 mask의 입력 형식이 일치하는 마스크를 설정합니다.

import * as React from 'react'
import { Box, TextField } from '@mui/material'
import { LocalizationProvider, DatePicker } from '@mui/lab'
import AdapterDateFns from '@mui/lab/AdapterDateFns'

export function DatePickerSample() {
  const [value, setValue] = React.useState<Date | null>(null)

  const handleChange = (newValue: Date | null) => {
    setValue(newValue)
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} >
      <Box sx={{ m: 2, width: '25ch' }}>

        <DatePicker
          label="DatePicker"
          value={value}
          onChange={handleChange}
          inputFormat='yyyy/MM/dd'
	  mask='____/__/__'
          renderInput={(params) => <TextField {...params} />}
        />

      </Box>
    </LocalizationProvider>
  )
}

PC 크기

크기 이동

DatePicker 구성 요소는 화면 크기에 따라 작동을 변경합니다.
DesktopDatePicker
Mobile DatePicker는 이동식 크기의 구성 요소만 있으면 됩니다.

1년만 선택할 수 있는 DatePicker

1년만 선택할 수 있는 DatePicker
views에서 지정한 year 을 통해 연도 선택 대화상자만 표시합니다.
inputFormat 및 mask를 지정하여 연도만 표시합니다.

import * as React from 'react'
import { Box, TextField } from '@mui/material'
import { LocalizationProvider, DatePicker } from '@mui/lab'
import AdapterDateFns from '@mui/lab/AdapterDateFns'

export function DatePickerSample() {
  const [value, setValue] = React.useState<Date | null>(null)

  const handleChange = (newValue: Date | null) => {
    setValue(newValue)
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Box sx={{ m: 2, width: '25ch' }}>
        <DatePicker
          label="DatePicker 年のみ"
          value={value}
          onChange={handleChange}
          views={['year']}
          inputFormat='yyyy'
          mask='____'
          renderInput={(params) => <TextField {...params} />}
        />
      </Box>
    </LocalizationProvider>
  )
}

년월의 DatePicker만 선택 가능

년월의 DatePicker만 선택 가능
views에서 지정한 year 과 month 을 통해 연도 선택 대화상자와 월 선택 대화상자를 표시합니다.
inputFormat 및 mask를 지정하여 연월 섹션만 표시합니다.

import * as React from 'react'
import { Box, TextField } from '@mui/material'
import { LocalizationProvider, DatePicker } from '@mui/lab'
import AdapterDateFns from '@mui/lab/AdapterDateFns'

export function DatePickerSample() {
  const [value, setValue] = React.useState<Date | null>(null)

  const handleChange = (newValue: Date | null) => {
    setValue(newValue)
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Box sx={{ m: 2, width: '25ch' }}>
        <DatePicker
          label="DatePicker 年月のみ"
          value={value}
          onChange={handleChange}
          views={['year', 'month']}
          inputFormat='yyyy/MM'
          mask='____/__'
          renderInput={(params) => <TextField {...params} />}
        />
      </Box>
    </LocalizationProvider>
  )
}

총결산

다음에는 DatePicker의 일본어화에 관한 기사를 쓰고 싶습니다.