Docs›Componentes (Admin)›mad-time-field
Componentes (Admin)

mad-time-field

Hora HH:MM (input nativo HTML5).

Campo de hora. Usa input nativo type="time" do HTML5 — sem dependencia de jQuery/datepicker.

Props

Prop Tipo Default Descricao
name string '' Nome do campo (obrigatorio)
label string '' Label do campo
value string '' Valor default do dev — o registro do MadRenderContext vence
hint string '' Texto de ajuda
error string '' Mensagem de erro
required bool false Campo obrigatorio
disabled bool false Campo desabilitado
readonly bool false Somente leitura
attrs string '' Atributos HTML extras
width string '' Largura do .mad-field (numero puro = px)
max-width string '' Largura maxima do .mad-field

Uso basico

<mad-time-field name="horario" label="Horario" />

Required

<mad-time-field name="hora_entrega" label="Hora de entrega" required />

De onde vem o valor exibido

value e apenas o default do dev: o merge e feito por Mad\Support\MadFieldValue::mergeAttrs(), e o valor do registro no MadRenderContext (chave name, vindo de form->fill($registro) / form->set(...)) sobrescreve a prop. Em edicao, portanto, nao adianta chumbar :value esperando ver esse valor.

{{-- Default so pra tela nova; em edicao o registro vence --}}
<mad-time-field name="hora_entrega" label="Hora de entrega" value="08:00" />

Readonly

<mad-time-field name="hora_registro" label="Hora do registro" readonly />

Formato e conversao

Componente Exibicao (usuario) Armazenamento (banco)
mad-time-field HH:MM HH:MM

Dentro de formulario

<mad-form submit="onSave">
    <mad-form-grid :cols="3">
        <mad-date-field name="dt_pedido" label="Data do pedido" required />
        <mad-time-field name="hora_entrega" label="Hora de entrega" />
        <mad-datetime-field name="dt_aprovacao" label="Aprovacao" />
    </mad-form-grid>
    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Quando usar cada componente

Preciso... Usar
Somente hora <mad-time-field>
Somente data <mad-date-field>
Data e hora juntos <mad-datetime-field>
Periodo (inicio/fim) <mad-daterange-field>

NUNCA fazer

{{-- ERRADO: usar mad-input-field com type="time" --}}
<mad-input-field name="hr" label="Hora" type="time" />

{{-- CERTO --}}
<mad-time-field name="hr" label="Hora" />

{{-- ERRADO: input nativo --}}
<input type="time" name="hr">

{{-- CERTO --}}
<mad-time-field name="hr" label="Hora" />