[Vue3] vue-datepicker 사용기

여기 문서 참고했음.

 

1. 설치

npm install --save @vuepic/vue-datepicker

 

2. main.js에 추가 및 내용 수정

import { createApp } from 'vue'
import App from './App.vue'
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const app = createApp(App);
app.component('Datepicker', Datepicker);

app.mount('#app')

 

3. .vue에서 사용

나는 text입력 보다는 달력이 항상 보여지길 바랐음.

inline을 넣어주면 됨. 그리고 달력에 특정 값을 클릭 할 때 마다 자동으로 변수에 저장되도록  auto-apply를 넣어줘야 함.

<template>
	<div>
		<Datepicker v-model="date" inline auto-apply/>
    </div>
</template>

<script>
import { ref } from '@vue'

export default {
	name: 'View',
	setup() {
    	const date = ref()
        
        return {
        	date
		}
    }
</script>