vue-datetime 플러그인 사용

지난번엔 vue 같은 거 잘 몰라서 왠지 뻘 질문을 했던 거 같아요ㅋ

https://xetown.com/questions/1534785

좋아보이는 datetimepicker가 있어서 써먹어볼 수 있을까 했는데...

해볼 만한 것 같습니다ㅎㅎ
일단 cdn을 잔뜩 써봤어요ㅋ
직접 불러서 쓰기엔 받아서 저장해야 할 라이브러리가 많더라구요;;

그래서 일단 이렇게

<load target="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" />
<load target="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js" />
<load target="https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js" />
<load target="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-datetime.min.js" />
<load target="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-datetime.min.css" />

그리고 데모와 깃허브에 나와 있는 용법에 따라 아래처럼 하니까

<div id="app">
    <datetime type="datetime" :week-start="7" class="theme-gray"></datetime>
</div>
<script>
    new Vue({
        el: "#app",
        data: {}
    })
</script>
<style>
    .theme-gray .vdatetime-popup__header,
    .theme-gray .vdatetime-calendar__month__day--selected > span > span,
    .theme-gray .vdatetime-calendar__month__day--selected:hover > span > span {
        background: #666;
    }
    .theme-gray .vdatetime-year-picker__item--selected,
    .theme-gray .vdatetime-time-picker__item--selected,
    .theme-gray .vdatetime-popup__actions__button {
        color: #666;
    }
</style>

잘 나오네요ㅎㅎ

1. 달력 모양으로 날짜 선택

2. 날짜 선택하고 OK 하면 스크롤로 시간 선택

3. 폼에 선택값 전달