[Nuxt] Ant Design Date picker 사용하기

📱테스트 환경

"nuxt": "^3.11.2"
"vue": "^3.4.21"
"vue-router": "^4.3.0"

---

데이트피커를 넣으려고하는데 <input type=date /> 로 넣으니까 너무 몬생겼다 ..몬생겨도 너무 몬생겨서 디자인 프레임워크를 이용하고 싶었는데또 React 를 개발을 주로 하다보니 Antd 가 생각이 났다.

하지만 Antd 가 아무래도 React UI 에 맞춰져서 가이드도 그렇게 되어있다보니

Nuxt 에서 하려니까 좀 애를 먹고 있었다..

https://2x.antdv.com/components/overview/

일단 Nuxt 의 Antd 는 여기서 확인할 수 있고 DatePicker 를 사용하는 방법은 다음과 같다.

// nuxt.config.ts

export default {
	...
    modules: [
    	...
        "@ant-design-vue/nuxt"
        ...
    ]
}

모듈에 추가해주면 기본준비는 끝났고 바로 사용하면되는데

<a-date-picker v-model:value="startDt" :locale="locale" value-format="YYYY-MM-DD" placeholder="시작일"/>
<a-date-picker v-model:value="endDt" :locale="locale" value-format="YYYY-MM-DD" placeholder="종료일"/>

이런식으로 사용할 수 있다.

value-format 을 통해 데이터의 포맷을 설정해주고

기본언어가 영어다 보니 한글설정이 필요한데 이를 위해

locale 을 추가한다.

import locale from 'ant-design-vue/es/date-picker/locale/ko_KR';

문제가 여기까지만 하면 반쪽자리 한글지원이 된다.

열심히 chatGPT 나 블로그 글을 살펴봐도 moment 시간설정을 하라는데

ㄴㅏ는 아무리 해도 안됐다.

근데 이게 찾아보니가 moment 가 이니라 dayjs 설정이 필요하다.

import dayjs from 'dayjs';
import 'dayjs/locale/ko';

dayjs.locale('ko');

이렇게 하면 한국어 설정도 되고 내가 따로 디자인 하지 않아도

ㅇㅏ주 이쁜 DatePicker 를 사용할 수 있따 ~