> For the complete documentation index, see [llms.txt](https://wotamann.gitbook.io/vuetify-form-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wotamann.gitbook.io/vuetify-form-base/input-and-controls-1/date-and-time.md).

# Date, Time & Color

## Color 

Pickers, Menu & Native Implementation

```javascript
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'
  }
}   
```

### [More Informations to Vuetify Color-Pickers find here](https://vuetifyjs.com/en/components/color-pickers/).

####

## Date & Month

Pickers, Menu & Native Implementation

```javascript
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'
  }
}
```

### [More Informations to Vuetify Date-Pickers find here](https://vuetifyjs.com/en/components/date-pickers/).

####

## Time&#x20;

Pickers, Menu & Native Implementation

```javascript
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'
  }
}
```

### [More Informations to Vuetify Time-Pickers find here](https://vuetifyjs.com/en/components/time-pickers/).

## [Example](http://192.168.0.137:8080/pickers)