⚪
Vuetify-Form-Base
  • Introduction
  • News & Changes
  • Quickstart
    • Start with
    • Installation
    • Intro
    • Features
    • License
  • Form
    • Validation
  • Component
    • Async Loading
    • Attributes
    • From Schema to Component
    • Events
    • Grid
    • Slots
    • CSS
    • Custom Components
    • Tooltips
  • Schema
    • General
    • Autogeneration
    • Computed Schema
    • Display & Typography
    • Grouping Controls
    • Arrays
  • Input & Controls
    • Text-Field & Input
    • Checkbox, Switch & Sliders
    • Radio Buttons
    • Buttons
    • Select, Combo & Autocomplete
    • Lists & Treeviews
    • Date, Time & Color
    • Icons & Images
Powered by GitBook
On this page
  • Color
  • More Informations to Vuetify Color-Pickers find here.
  • Date & Month
  • More Informations to Vuetify Date-Pickers find here.
  • Time
  • More Informations to Vuetify Time-Pickers find here.
  • Example

Was this helpful?

  1. Input & Controls

Date, Time & Color

Color

Pickers, Menu & Native Implementation

schema: { 
  // Color Picker: 
  colorPicker: { 
    type:'color'
  },
  
  // Color Picker from Textfield 
  colorText:{ 
    type:'color', 
    ext:'text',
    text:{ clearable:true, prependIcon: 'palette'},
  }, 
  
  // Color - Native HTML <Input type="color" /> 
  colorNativeType:{ 
    type:'text', 
    ext:'color',
    prependIcon:'palette', 
    label:'Color'
  }
}   

Date & Month

Pickers, Menu & Native Implementation

schema: { 
  // Date Picker: 
  datePicker: { 
    type:'date'
  },
  
  // Textfield with linked Date Menu
  dateText:{ 
    type:'date', 
    ext:'text',
    locale:'en',
    text:{ label:'Date'}
 },
  
  // Textfield with linked Month Menu
  monthText:{ 
    type:'date', 
    ext:'text',
    typeInt:'month', 
    locale:'en',
    text:{ label:'Month', clearable:true, prependIcon: 'event'}
  },
  
  // Date - Native HTML <Input type="date" />
  dateNativeType:{ 
    type:'text', 
    ext:'date', 
    locale:'en',
    prependIcon: 'event', 
    label:'Date'
  }
}

Time

Pickers, Menu & Native Implementation

schema: {
  // Time Picker: 
  timePicker: { 
    type:'time'
  },
  
  // Textfield with linked Time Menu
  timeText:{ 
    type:'time', 
    ext:'text',
    text:{ label:'Time', clearable:true, prependIcon: 'timer'} 
    format:'24h',
    menu:{ 
      closeOnContentClick:false, 
      nudgeRight:200, 
      maxWidth:'290px', 
      minWidth:'290px' 
    }
  }
  
  // Time  - Native HTML <Input type="time" />
  timeNativeType:{ 
    type:'text', 
    ext:'time', 
    format:'24h',
    prependIcon: 'timer', 
    label:'Time'
  }
}
PreviousLists & TreeviewsNextIcons & Images

Last updated 4 years ago

Was this helpful?

.

.

.

More Informations to Vuetify Color-Pickers find here
More Informations to Vuetify Date-Pickers find here
More Informations to Vuetify Time-Pickers find here
Example