Campos de formulário
mad-date-field — storage yyyy-mm-dd, exibicao dd/mm/aaaa.
Armazenamento yyyy-mm-dd, exibicao dd/mm/aaaa — a conversao e automatica.
<mad-date-field name="dt_nascimento" label="Data de nascimento"
hint="Armazenamento yyyy-mm-dd, exibicao dd/mm/aaaa — a conversao e automatica." />
min/max restringem o calendario; mad-datetime-field junta data e hora num campo so.
min/max restringem o intervalo selecionavel no calendario.
mad-datetime-field junta data + hora num campo so — storage yyyy-mm-dd HH:MM:SS.
<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>
mad-time-field — input nativo HTML5 type=time.
Input nativo HTML5 type=time — formato HH:MM.
<mad-time-field name="horario_reuniao" label="Horario da reuniao"
hint="Input nativo HTML5 type=time — formato HH:MM." />
mad-daterange-field com a sidebar de atalhos ERP padrao.
presets adiciona a sidebar com 8 atalhos ERP (Hoje, Ultimos 7 dias, Este mes, Este trimestre...).
<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...)." />
custom_presets + max_span pra janelas especificas do negocio (safra, campanha).
custom_presets soma atalhos especificos do negocio aos padrao; max_span limita a janela maxima em dias.
<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." />
mad-period-monthyear — seletor de periodo usado dentro de mad-dash-filters; aqui funciona porque o controller implementa MadFilterable.
@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>
mad-form com submit real — devolve as datas recebidas via TutorFormsDatas::onSubmitDemo.
<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>
/**
* 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
<?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');
}
}
<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>