Date/month picker

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.

Usage

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

v-date-picker
Name
allowed-dates
Default
null
Type
function

Restricts which dates can be selected

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(255, 0, 0, 0.5))を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
day-format
Default
null
Type
function

Allows you to customize the format of the day string that appears in the date table. Called with date (ISO 8601 string) and locale (string) arguments.

Name
disabled New in — v1.4
Default
false
Type
boolean

Components.DatePickers.

Name
event-color
Default
warning
Type
array | function | object | string

Sets the color for event dot. It can be string (all events will have the same color) or object where attribute is the event date and value is the color for specified date or function taking date as a parameter and returning color for that date

Name
events
Default
null
Type
array | function | object

Marks the date as an event (only for date picker)

Name
first-day-of-week
Default
0
Type
string | number

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

Name
full-width
Default
false
Type
boolean

Components.DatePickers.

Name
header-color
Default
undefined
Type
string

Components.DatePickers.

Name
header-date-format
Default
null
Type
function

Allows you to customize the format of the month string that appears in the header of the calendar. Called with date (ISO 8601 string) and locale (string) arguments.

Name
landscape
Default
false
Type
boolean

Components.DatePickers.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
locale
Default
'en-us'
Type
string

Sets the locale. Accepts a string with a BCP 47 language tag.

Name
max
Default
undefined
Type
string

Maximum allowed date/month

Name
min
Default
undefined
Type
string

Minimum allowed date/month

Name
month-format
Default
null
Type
function

Formatting function used for displaying months in the months table. Called with date (ISO 8601 string) and locale (string) arguments.

Name
multiple New in — v1.2
Default
false
Type
boolean

Components.DatePickers.

Name
next-icon
Default
'$vuetify.icons.next'
Type
string

Components.DatePickers.

Name
no-title
Default
false
Type
boolean

Components.DatePickers.

Name
picker-date
Default
undefined
Type
string

Displayed year/month

Name
prev-icon
Default
'$vuetify.icons.prev'
Type
string

Components.DatePickers.

Name
reactive
Default
false
Type
boolean

Components.DatePickers.

Name
readonly
Default
false
Type
boolean

Makes the picker readonly (doesnt't allow to select new date or navigate through months/years)

Name
scrollable
Default
false
Type
boolean

Allows changing displayed month with mouse scroll

Name
show-current
Default
true
Type
boolean | string

Toggles visibility of the current date/month outline or shows the provided date/month as a current

Name
show-week New in — v1.4
Default
false
Type
boolean

Components.DatePickers.

Name
title-date-format
Default
null
Type
function

Allows you to customize the format of the date string that appears in the title of the date picker. Called with date (ISO 8601 string) and locale (string) arguments.

Name
type
Default
'date'
Type
string

Determines the type of the picker - date for date picker, month for month picker

Name
value
Default
undefined
Type
array | string

Components.DatePickers.

Name
weekday-format New in — v1.3
Default
null
Type
function

Components.DatePickers.

Name
width
Default
290
Type
number | string

Components.DatePickers.

Name
year-format
Default
null
Type
function

Allows you to customize the format of the year string that appears in the header of the calendar. Called with date (ISO 8601 string) and locale (string) arguments.

Name
year-icon
Default
undefined
Type
string

Generates an icon next to the year

Examples

Date pickers - Colors

Date picker colors can be set using the color and header-color props. If header-color prop is not provided header will use the color prop value.

Date pickers - In dialog and menu

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 scoped 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.

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

You can specify allowed dates using arrays, objects, and functions.

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

You can specify allowed the picker's width or make it full width.

Date pickers - birthday picker

Starting with year picker by default, resticting dates range and closing the picker menu after selecting the day make the perfect 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

You can specify events using arrays, objects, and functions. To change the default color of the event use event-color prop.

Date pickers - Internationalization

The date picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop.

Date pickers - icons

You can override the default icons used in the picker.

Date pickers - read only

Selecting new date could be disabled by adding readonly prop.

Date pickers - current date indicator

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

Month pickers

Month pickers come in two orientation variations, portrait (default) and landscape.

Month pickers - Colors

Month picker colors can be set using the color and header-color props. If header-color prop is not provided header will use the color prop value.

Month pickers - In dialog and menu

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 scoped 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.

Month pickers - Allowed months

You can specify allowed months using arrays, objects, and functions.

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

You can specify allowed the picker's width or make it full width.

Month pickers - Internationalization

The month picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop.

Month pickers - icons

You can override the default icons used in the picker.

Month pickers - read only

Selecting new date could be disabled by adding readonly prop.

Month pickers - current month indicator

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore