Components - Pickers
The "v-date-picker" and "v-time-picker" offer the user a visual representation for selecting date and time.
Date pickers come in two orientation variations, portrait (default) and landscape.
2017
Mon, Aug 7
August 2017
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
2017
Mon,
Aug 7
Aug 7
August 2017
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
Date pickers come in a dark variant which utilizes the applications primary accent color.
2017
Mon, Aug 7
August 2017
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
2017
Mon,
Aug 7
Aug 7
August 2017
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
When integrating a picker into av-text-field
, it is recommended to use thereadonly
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.
You can specify allowed dates using arrays, objects, and functions.
2017
Mon, Aug 7
August 2017
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
You can specify a custom date format. This will be returned through theformatted-value
prop. Using thesync
property (new in Vue 2.3), you can link up a formatted version of the date.
Original | No date |
---|---|
Formatted | No date |
2017
Mon, Aug 7
August 2017
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
Time pickers have the light theme enabled by default.
1:03
AMPM
123456789101112
1:03
AMPM
123456789101112
An alternate dark theme can be used for dark theme applications.
1:03
AMPM
123456789101112
1:03
AMPM
123456789101112
Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.
A time picker can be switched to 24hr format.
13:03
01234567891011121314151617181920212223
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
.
2017
M08 7, Mon
2017 M08
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
2017
M08 7, Mon
2017 M08
M | T | W | T | F | S | S |
---|---|---|---|---|---|---|
2017
M08 7, Mon
2017 M08
M | T | W | T | F | S | S |
---|---|---|---|---|---|---|