상점

기업

The v-date-picker is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting date/month.

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.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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

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

피커의 너비를 지정하거나 전체 너비로 만들 수도 있습니다.

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 오브젝트를 통해 국제화를 지원합니다. locale prop에 BCP 47 언어 태그를 지정하고 first-day-of-week prop으로 한 주의 시작 요일을 설정하세요.

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

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

By default the current date is displayed using outlined button - show-current prop allows you to remove the border or select different date to be displayed as the current one.

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

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

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

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.

피커의 너비를 지정하거나 전체 너비로 만들 수도 있습니다.

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

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

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

By default the current month is displayed using outlined button - show-current prop allows you to remove the border or select different month to be displayed as the current one.

When integrating a picker into a v-text-field, it is recommended to use the readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.

Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.

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

Formatting dates is possible also with external libs such as Moment.js or date-fns

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 picker can select date range with the range prop. When using range prop date picker expects its model to be an array of length 2 or empty.

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

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

When integrating a picker into a v-text-field, it is recommended to use the readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.

Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!