날짜 선택기 (Date/month picker)
v-date-picker는 여러 다른 Vuetify 컴포넌트에서 쓰일 수 있는 독립적 컴포넌트입니다.
이 컴포넌트는 날짜/월을 선택할 수 있는 시각적 표현을 제공합니다.
사용법
Date pickers come in two orientation variations, portrait (default) and landscape. By default they are emitting input event when the day (for date picker) or month (for month picker), but with reactive prop they can update the model even after clicking year/month.
API
선택가능한 날짜를 제한
컨트롤에 색상을 지정
다크 테마를 적용
달력 헤더의 일 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)
Components.DatePickers.
이벤트를 표시하는 점의 색깔. 값은 문자열(모든 이벤트가 같은 색이 됨)이나 오브젝트 (속성이 이벤트 날짜, 값이 그 날짜의 색깔) 또는 함수(날짜를 인자로 받아서 색깔을 반환)이 가능.
날짜를 이벤트로 표시(날짜 선택기만 가능)
Sets the first day of the week, starting with 0 for Sunday.
100% 너비(width)를 가지도록 강제
헤더 색상을 정의. 지정되지 않은 경우 color prop이나 기본 피커 색상을 사용
달력 헤더의 월 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)
가로방향 피커
라이트 테마를 적용
로케일(locale) 설정. BCP 47 language tag 문자열.
최대 날짜/월
최소 날짜/월
월 테이블에서 월을 표시하는 포맷팅 함수. date (ISO 8601 문자열)과 locale (문자열) 인자와 함께 호출.
Components.DatePickers.
다음 달/년 버튼의 아이콘
피커의 타이틀을 숨김
표시되는 년/월
이전 달/년 버튼의 아이콘
Components.DatePickers.
읽기전용으로 만듬 (새로운 날짜를 선택하거나 다른 년/월로 이동할 수 없음)
마우스 스크롤로 월을 바꿈.
현재 날짜/월이나 현재 날짜/월로 지정된 날짜/월이 outline으로 표시될지 결정
Components.DatePickers.
선택기 타이틀의 날짜 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)
선택기의 타입을 결정 - date는 날짜 선택, month는 월 선택
표시여부를 조절 (Controls visibility)
Components.DatePickers.
컨텐츠의 폭을 설정
달력 헤더의 년 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)
년 다음에 나오는 아이콘
예제
Date pickers - 색상 (Colors)
날짜 선택기의 색은 color 와 head-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 - formatting date using external libs
Formatting dates is possible also with external libs such as Moment.js or date-fns
Date pickers - 특정 날짜 허용 (Allowed dates)
배열, 오브젝트, 함수를 이용하여 선택 가능한 날짜를 정할 수 있습니다.
Date pickers - Mutiple
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의 색은 color 와 head-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 - Multiple
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)를 제거하거나 다른 달를 현재 월처럼 보이게 만들 수 있습니다.