• BSA Lab.
      home

  • apps
    Welcome
  • dashboard
    Layout
  • web
    Components
    keyboard_arrow_down
    • Lists
      list
    • Cards
      payment
    • Carousels
      recent_actors
    • Expansion panels
      view_day
    • Dialogs
      message
    • Tabs
      tab
    • Steppers
      directions_walk
    • Data tables
      view_module
    • Date/Time Pickers
      today
    • Text fields
      format_indent_increase
    • Forms
      assignment
  • alarm
    Warnings
    keyboard_arrow_down
    • Error-404
      alarm_add
    • Error-500
      alarm_on
    • Maintenance
      build
Vuetify / Components-pickers
  • Documentation

  • Vuetify.js Quick-Start
  • Nuxt.js Guide
  • Vue.js Guide
Components - Pickers
The "v-date-picker" and "v-time-picker" offer the user a visual representation for selecting date and time.
#1 Date pickers - Light
Date pickers come in two orientation variations, portrait (default) and landscape.
2017
Mon, Aug 7
August 2017
SMTWTFS
 
2017
Mon,
Aug 7
August 2017
SMTWTFS
 

#2 Date pickers - Dark
Date pickers come in a dark variant which utilizes the applications primary accent color.
2017
Mon, Aug 7
August 2017
SMTWTFS
 
2017
Mon,
Aug 7
August 2017
SMTWTFS
 

#3 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.
event
event

#4 Date pickers - Allowed dates
You can specify allowed dates using arrays, objects, and functions.
2017
Mon, Aug 7
August 2017
SMTWTFS
 

#5 Custom format
You can specify a custom date format. This will be returned through the formatted-value prop. Using the sync property (new in Vue 2.3), you can link up a formatted version of the date.
OriginalNo date
FormattedNo date
2017
Mon, Aug 7
August 2017
SMTWTFS
 

#6 Time pickers - Light
Time pickers have the light theme enabled by default.
1:03
AMPM
123456789101112
1:03
AMPM
123456789101112

#7 Time pickers - Dark
An alternate dark theme can be used for dark theme applications.
1:03
AMPM
123456789101112
1:03
AMPM
123456789101112

#8 Time pickers - In dialog and menu
Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.
access_time
access_time

#9 Time pickers - 24h format
A time picker can be switched to 24hr format.
13:03
01234567891011121314151617181920212223

#10 Date pickers - Localization
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
SMTWTFS
 
2017
M08 7, Mon
2017 M08
MTWTFSS
 
2017
M08 7, Mon
2017 M08
MTWTFSS
 

© 2017 "BSA Lab." - All Rights Reserved