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

Last updated