MAD Lab
/
Tutor > Campos de formulário > Datas e horas

Datas e horas

Campos de formulário

mad-date-field mad-time-field mad-datetime-field mad-daterange-field mad-period-monthyear
Data simples

mad-date-field — storage yyyy-mm-dd, exibicao dd/mm/aaaa.

DSTQQSS

Armazenamento yyyy-mm-dd, exibicao dd/mm/aaaa — a conversao e automatica.

resources/views/tutor/examples/forms-datas/basico.blade.php
<mad-date-field name="dt_nascimento" label="Data de nascimento"
    hint="Armazenamento yyyy-mm-dd, exibicao dd/mm/aaaa — a conversao e automatica." />
Limites (min/max) + data e hora

min/max restringem o calendario; mad-datetime-field junta data e hora num campo so.

DSTQQSS

min/max restringem o intervalo selecionavel no calendario.

DSTQQSS
Hora: :

mad-datetime-field junta data + hora num campo so — storage yyyy-mm-dd HH:MM:SS.

resources/views/tutor/examples/forms-datas/limites.blade.php
<mad-form-grid :cols="2">
    <mad-date-field name="dt_inicio_limite" label="Data de inicio" min="2024-01-01" max="2026-12-31" required
        hint="min/max restringem o intervalo selecionavel no calendario." />
    <mad-datetime-field name="dt_evento_limite" label="Evento (data e hora)" min="2024-01-01 08:00" max="2026-12-31 18:00" required
        hint="mad-datetime-field junta data + hora num campo so — storage yyyy-mm-dd HH:MM:SS." />
</mad-form-grid>
Hora

mad-time-field — input nativo HTML5 type=time.

Input nativo HTML5 type=time — formato HH:MM.

resources/views/tutor/examples/forms-datas/hora.blade.php
<mad-time-field name="horario_reuniao" label="Horario da reuniao"
    hint="Input nativo HTML5 type=time — formato HH:MM." />
Periodo com presets

mad-daterange-field com a sidebar de atalhos ERP padrao.

Periodo
DSTQQSS
DSTQQSS

presets adiciona a sidebar com 8 atalhos ERP (Hoje, Ultimos 7 dias, Este mes, Este trimestre...).

resources/views/tutor/examples/forms-datas/periodo.blade.php
<mad-daterange-field name_start="dt_ini_periodo" name_end="dt_fim_periodo" label="Periodo" presets
    hint="presets adiciona a sidebar com 8 atalhos ERP (Hoje, Ultimos 7 dias, Este mes, Este trimestre...)." />
Periodo com atalhos proprios

custom_presets + max_span pra janelas especificas do negocio (safra, campanha).

Periodo com atalhos proprios
DSTQQSS
DSTQQSS

custom_presets soma atalhos especificos do negocio aos padrao; max_span limita a janela maxima em dias.

resources/views/tutor/examples/forms-datas/periodo-custom.blade.php
<mad-daterange-field name_start="dt_ini_safra" name_end="dt_fim_safra" label="Periodo com atalhos proprios"
    :max_span="365"
    :custom_presets="[
        ['Safra', '2026-01-01', '2026-06-30'],
        ['Black Friday', '2026-11-20', '2026-11-30'],
    ]"
    hint="custom_presets soma atalhos especificos do negocio aos padrao; max_span limita a janela maxima em dias." />
Mes/ano (segmented)

mad-period-monthyear — seletor de periodo usado dentro de mad-dash-filters; aqui funciona porque o controller implementa MadFilterable.

Custom period

Estado no host (via MadFiltersTrait): mes = , ano = . Clique num preset pra ver mudar depois do wire round-trip.
resources/views/tutor/examples/forms-datas/mes-ano.blade.php
@php
    // $that (como $__component) e uma variavel LEXICAL setada por
    // MadComponent::render() no template de TOPO da pagina. Este partial e
    // incluido de dentro do componente Blade nativo tutor-demo (escopo
    // isolado), entao $that nao chega ate aqui sozinho — precisa ser
    // reobtido via o stack estatico de MadRenderContext (push/pop em
    // MadComponent::render(), atravessa qualquer aninhamento de componentes).
    $that = \Mad\Component\MadRenderContext::getComponent();
@endphp
<mad-period-monthyear />

<mad-callout type="info" icon="info">
    Estado no host (via MadFiltersTrait): mes = <strong>{{ optional($that)->mes ?: '—' }}</strong>,
    ano = <strong>{{ optional($that)->ano ?: '—' }}</strong>. Clique num preset pra ver mudar depois do wire round-trip.
</mad-callout>
Acao wire

mad-form com submit real — devolve as datas recebidas via TutorFormsDatas::onSubmitDemo.

DSTQQSS

resources/views/tutor/examples/forms-datas/wire-submit.blade.php
<mad-form submit="onSubmitDemo">
    <mad-form-grid :cols="2">
        <mad-date-field name="data_wire" label="Data" required />
        <mad-time-field name="hora_wire" label="Hora" required />
    </mad-form-grid>
    <mad-form-actions align="right">
        <mad-btn type="submit" variant="primary" icon="send">Enviar (onSubmitDemo)</mad-btn>
    </mad-form-actions>
</mad-form>
app/control/Tutor/TutorFormsDatas.php
/**
 * Submit do exemplo "Ação wire" — devolve data + hora recebidas (já no
 * formato de banco, prontas pra um Model Eloquent).
 */
public function onSubmitDemo(): MadResponse
{
    $data = $this->form->getData();

    $dataEvento = trim((string) ($data->data_wire ?? ''));
    $horaEvento = trim((string) ($data->hora_wire ?? ''));

    $resumo = ($dataEvento !== '' || $horaEvento !== '')
        ? "data={$dataEvento} | hora={$horaEvento}"
        : 'nenhum campo preenchido';

    return (new MadResponse())->toast("Form recebido: {$resumo}", 'success', 'onSubmitDemo');
}
Código-fonte completo da página
app/control/Tutor/TutorFormsDatas.php
<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;
use Mad\Filters\MadFilterable;
use Mad\Filters\MadFiltersTrait;
use Mad\Form\MadForm;
use Mad\Http\MadResponse;

/**
 * TutorFormsDatas — página "Datas e horas" do catálogo (mad-date-field,
 * mad-time-field, mad-datetime-field, mad-daterange-field,
 * mad-period-monthyear).
 *
 * Implementa MadFilterable via MadFiltersTrait só por causa do exemplo
 * "mes-ano": <mad-period-monthyear> lê $component->mes/->ano e chama
 * setMesAno() no host (ver packages/mad-framework/.../period-monthyear.blade.php)
 * — sem isso o preset renderiza mas não tem estado pra refletir. O trait
 * no-opa graciosamente sem $periodType/$database/etc declarados (só usados
 * por applyPeriodoToQuery(), que este controller nunca chama) e sem
 * $rememberFilters (sessão não é tocada).
 */
class TutorFormsDatas extends TutorPage implements MadFilterable
{
    use MadFiltersTrait;

    protected string $catalogKey = 'forms_datas';

    public function mount(array $params = []): void
    {
        $this->form = new MadForm('tutor_forms_datas');
    }

    /**
     * Submit do exemplo "Ação wire" — devolve data + hora recebidas (já no
     * formato de banco, prontas pra um Model Eloquent).
     */
    public function onSubmitDemo(): MadResponse
    {
        $data = $this->form->getData();

        $dataEvento = trim((string) ($data->data_wire ?? ''));
        $horaEvento = trim((string) ($data->hora_wire ?? ''));

        $resumo = ($dataEvento !== '' || $horaEvento !== '')
            ? "data={$dataEvento} | hora={$horaEvento}"
            : 'nenhum campo preenchido';

        return (new MadResponse())->toast("Form recebido: {$resumo}", 'success', 'onSubmitDemo');
    }
}
resources/views/tutor/forms/datas.blade.php
<x-tutor-page page="forms_datas">
    <x-tutor-demo demo="tutor.examples.forms-datas.basico"
        title="Data simples" desc="mad-date-field — storage yyyy-mm-dd, exibicao dd/mm/aaaa." />

    <x-tutor-demo demo="tutor.examples.forms-datas.limites"
        title="Limites (min/max) + data e hora" desc="min/max restringem o calendario; mad-datetime-field junta data e hora num campo so." />

    <x-tutor-demo demo="tutor.examples.forms-datas.hora"
        title="Hora" desc="mad-time-field — input nativo HTML5 type=time." />

    <x-tutor-demo demo="tutor.examples.forms-datas.periodo"
        title="Periodo com presets" desc="mad-daterange-field com a sidebar de atalhos ERP padrao." />

    <x-tutor-demo demo="tutor.examples.forms-datas.periodo-custom"
        title="Periodo com atalhos proprios" desc="custom_presets + max_span pra janelas especificas do negocio (safra, campanha)." />

    <x-tutor-demo demo="tutor.examples.forms-datas.mes-ano"
        title="Mes/ano (segmented)" desc="mad-period-monthyear — seletor de periodo usado dentro de mad-dash-filters; aqui funciona porque o controller implementa MadFilterable." />

    <x-tutor-demo demo="tutor.examples.forms-datas.wire-submit"
        title="Acao wire" desc="mad-form com submit real — devolve as datas recebidas via TutorFormsDatas::onSubmitDemo."
        php="TutorFormsDatas::onSubmitDemo" />
</x-tutor-page>