날짜 선택기 (Date/month picker)

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

사용법

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


API

v-date-picker
이름
allowed-dates
디폴트
null
타입
function

선택가능한 날짜를 제한

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
day-format
디폴트
null
타입
function

달력 헤더의 일 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
event-color
디폴트
warning
타입
string | function | object

이벤트를 표시하는 점의 색깔. 값은 문자열(모든 이벤트가 같은 색이 됨)이나 오브젝트 (속성이 이벤트 날짜, 값이 그 날짜의 색깔) 또는 함수(날짜를 인자로 받아서 색깔을 반환)이 가능.

이름
events
디폴트
null
타입
array | object | function

날짜를 이벤트로 표시(날짜 선택기만 가능)

이름
first-day-of-week
디폴트
0
타입
string | number

Sets the first day of the week, starting with 0 for Sunday.

이름
full-width
디폴트
false
타입
boolean

100% 너비(width)를 가지도록 강제

이름
header-color
디폴트
undefined
타입
string

헤더 색상을 정의. 지정되지 않은 경우 color prop이나 기본 피커 색상을 사용

이름
header-date-format
디폴트
null
타입
function

달력 헤더의 월 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
landscape
디폴트
false
타입
boolean

가로방향 피커

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
locale
디폴트
'en-us'
타입
string

로케일(locale) 설정. BCP 47 language tag 문자열.

이름
max
디폴트
undefined
타입
string

최대 날짜/월

이름
min
디폴트
undefined
타입
string

최소 날짜/월

이름
month-format
디폴트
null
타입
function

월 테이블에서 월을 표시하는 포맷팅 함수. date (ISO 8601 문자열)과 locale (문자열) 인자와 함께 호출.

New in — v1.2
이름
multiple
디폴트
false
타입
boolean
이름
next-icon
디폴트
'$vuetify.icons.next'
타입
string

다음 달/년 버튼의 아이콘

이름
no-title
디폴트
false
타입
boolean

피커의 타이틀을 숨김

이름
picker-date
디폴트
undefined
타입
string

표시되는 년/월

이름
prev-icon
디폴트
'$vuetify.icons.prev'
타입
string

이전 달/년 버튼의 아이콘

이름
reactive
디폴트
false
타입
boolean
이름
readonly
디폴트
false
타입
boolean

읽기전용으로 만듬 (새로운 날짜를 선택하거나 다른 년/월로 이동할 수 없음)

이름
scrollable
디폴트
false
타입
boolean

마우스 스크롤로 월을 바꿈.

이름
show-current
디폴트
true
타입
boolean | string

현재 날짜/월이나 현재 날짜/월로 지정된 날짜/월이 outline으로 표시될지 결정

이름
title-date-format
디폴트
null
타입
function

선택기 타이틀의 날짜 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
type
디폴트
'date'
타입
string

선택기의 타입을 결정 - date는 날짜 선택, month는 월 선택

이름
value
디폴트
undefined
타입
array | string

표시여부를 조절 (Controls visibility)

이름
weekday-format
디폴트
null
타입
function
이름
width
디폴트
290
타입
number | string

The width of the content

이름
year-format
디폴트
null
타입
function

달력 헤더의 년 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
year-icon
디폴트
undefined
타입
string

년 다음에 나오는 아이콘

예제

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 - 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 - 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)를 제거하거나 다른 달를 현재 월처럼 보이게 만들 수 있습니다.