TimeInput
TimeInputs são componentes utilizados para inserir horários específicos no formato simples: hora e minutos.
Quando usar:
- For necessário definir horários de eventos, agendamentos, alarmes e etc…
Quando não usar:
- For necessário mostrar opções disponíveis de horários para seleção.
Uso
js
<CdsTimeInput
v-model="inputValue"
label="Horário"
/>Preview
:
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
modelValue | string|array | '' | -- | Prop utilizada como v-model. Define o horário exibido. Modo `single`: Deve ser enviada como uma String contendo o horário. Modo `range`: Deve ser enviada como um Array contendo dois horários (inicial e final). Pode ser enviada como um Array vazio ou String vazia. Todos os horários devem estar no formato `HH:mm`. |
id | string | 'time-input' | -- | O id a ser utilizado pelo elemento HTML. |
* label (required) | string | -- | A label a ser exibida acima do input. | |
required | boolean | false | -- | Propriedade utilizada para definir o estilo da label do componente. Em caso positivo, exibe um * indicando que o campo é de preenchimento obrigatório. |
disabled | boolean | false | -- | Propriedade utilizada para definir o desabilitado do componente |
mode | string | 'single' | single range | Propriedade utilizada para definir o modo de exibição do componente. `single`: Apenas um input de tempo; `range`: Dois inputs de tempo (início e fim). |
state | string | 'default' | default valid loading invalid | Propriedade utilizada para indicar o estado de validação do componente. |
errorMessage | string | 'Horário inválido' | -- | Mensagem a ser exibida em caso de estado inválido. |
Eventos
Nome | Descrição |
|---|---|
@update:modelValue | Evento indicando que o input foi preenchido. Retorna uma string com o horário, caso o componente esteja em modo `single`, ou um array contendo horários inicial e final, quando em modo `range`. Em caso de o valor do campo estar inválido, o evento é emitido com valor `null`, leve isto em consideração em possíveis formatações. As datas são retornadas sempre no formato `HH:mm`. |