날짜 선택기 (Date/month picker)

v-date-picker는 여러 다른 Vuetify 컴포넌트에서 쓰일 수 있는 독립적 컴포넌트입니다. 이 컴포넌트는 날짜/월을 선택할 수 있는 시각적 표현을 제공합니다.

사용법

Date picker 는 세로(portrait) 와 가로(landscape0) 두 방향의 변형이 있습니다. 기본 모드는 세로입니다. 기본적으로 날(날짜 선택기의 경우)이나 월(월 선택기의 경우) input 이벤트가 emit 됩니다. 하지만 reactive prop을 사용하면 year/month 를 클릭했을 때도 모델을 업데이트할 수 있습니다.


API

v-date-picker

예제

Date pickers - 색상 (Colors)

날짜 선택기의 색은 colorhead-color prop으로 설정할 수 있습니다. if-header-color prop이 없으면 color prop의 값이 사용됩니다.


Date pickers - 대화창과 메뉴에서 사용하기 (In dialog and menu)

선택기를 v-text-field 에 결합 하려면, readonly prop을 사용하는 것을 권장합니다. 이는 모바일 키보드가 작동하는 것을 방지합니다. 세로 공간을 절약하려면 선택기의 제목을 숨길수 있습니다.

선택기(Pickers)는 저장(save), 취소(cancel) 기능을 가로챌 수 있는(hook) 스코프드 슬롯(socped slot)을 제공합니다. This will maintain an old value which can be replaced if the user cancels.


Date pickers - formatting date

If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.


Date pickers - 특정 날짜 허용 (Allowed dates)

배열, 오브젝트, 함수를 이용하여 선택 가능한 날짜를 정할 수 있습니다.


Date pickers - MutipleNew in v1.2

Date picker can now select multiple dates with the multiple prop. If using multiple then date picker expects its model to be an array.


Date pickers - 너비 조절 (Setting picker width)

선택기의 너비를 조절하거나 꽉 차게 만들 수 있습니다.


Date pickers - 생년월일 선택기 (birthday picker)

기본적으로 년도를 먼저 선택하고, 월/일로 줄여나간 후 날짜를 선택하면 종료되는 방법으로 완벽한 생년월일 선택기를 만들 수 있습니다.


Date pickers - react to disaplyed month/year change

You can watch the pickerDate which is the displayed month/year (depending on the picker type and active view) to perform some action when it changes.


Date pickers - 이벤트 (Events)

배열, 오브젝트, 함수를 사용해서 이벤트를 지정할 수 있습니다. 기본 색깔을 바꾸려면 event-color prop을 사용합니다.


Date pickers - 국제화 (Internationalization)

자바스크립트의 Date 오브젝트를 통해 국제화를 지원합니다. locale prop에 BCP 47 언어 태그를 지정하고 first-day-of-week prop으로 한 주의 시작 요일을 설정하세요.


Date pickers - 아이콘 (icons)

선택기에서 사용하는 아이콘을 바꿀 수 있습니다.


Date pickers - 읽기전용 (read only)

readonly prop은 날짜 선택을 비활성화 합니다.


Date pickers - 오늘 날짜 표시 (current date indicator)

기본적으로 오늘 날짜는 테두리형 버튼(outline button)으로 표시됩니다. show-current prop은 테두리(border)를 제거하거나 다른 날짜를 오늘 날짜처럼 보이게 만들 수 있습니다.


월 선택기 (Month pickers)

Month pickers 는 세로(portrait) 와 가로(landscape0) 두 방향의 변형이 있습니다. 기본 모드는 세로입니다.


Month pickers - 색상 (Colors)

Month picker의 색은 colorhead-color prop으로 설정할 수 있습니다. if-header-color prop이 없으면 color prop의 값이 사용됩니다.


Month pickers - 대화창과 메뉴에서 사용하기 (In dialog and menu)

선택기를 v-text-field 에 결합 하려면, readonly prop을 사용하는 것을 권장합니다. 이는 모바일 키보드가 작동하는 것을 방지합니다. 세로 공간을 절약하려면 선택기의 제목을 숨길수 있습니다.

선택기(Pickers)는 저장(save), 취소(cancel) 기능을 가로챌 수 있는(hook) 스코프드 슬롯(socped slot)을 제공합니다. This will maintain an old value which can be replaced if the user cancels.


Month pickers - 특정 달 허용 (Allowed dates)

배열, 오브젝트, 함수를 이용하여 선택 가능한 달를 정할 수 있습니다.


Month pickers - MultipleNew in v1.2

Month pickers can now select multiple months with the multiple prop. If using multiple then the month picker expects its model to be an array.


Month pickers - 너비 조절 (Setting picker width)

선택기의 너비를 조절하거나 꽉 차게 만들 수 있습니다.


Month pickers - 국제화 (Internationalization)

자바스크립트의 Date 오브젝트를 통해 국제화를 지원합니다. locale prop에 BCP 47 언어 태그를 지정하고 first-day-of-week prop으로 한 주의 시작 요일을 설정하세요.


Month pickers - 아이콘 (icons)

선택기에서 사용하는 아이콘을 바꿀 수 있습니다.


Month pickers - 읽기전용 (read only)

readonly prop은 날짜 선택을 비활성화 합니다.


Month pickers - 현재 월 표시 (current month indicator)

기본적으로 이번 달은 테두리형 버튼(outline button)으로 표시됩니다. show-current prop은 테두리(border)를 제거하거나 다른 달를 현재 월처럼 보이게 만들 수 있습니다.