DateInput

Componente que consiste em um Input de data, é possivel clicar no ícone de calendário para abrir uma página que exibe um calendário com dia, mês e ano. Ao selecionar uma data, e clicar em Continuar esta data é selecionada.

Propriedades

placeHolder : é uma propriedade opcional que recebe uma string

date : valor do tipo Date que indica a data selecionada

minDate : o calendário é exibido a partir desta data mínima

limitDate : o calendário é exibido essa data como limite

label : propriedade opcional que recebe uma string com um texto que fica acima do input

testID : propriedade que recebe uma string para identificação do componente para ser usada no teste

onChange(date) : propriedade que recebe uma função para controle de estado do componente

style : permite midifcar o estilo do componente

disabled : boolean que indica que o DateInput está desabilitado

errorMessage : propriedade que indica a string de error

Importação

import {DateInput} from '@vizir-banking/banking-app-core/dist/fuel-design';

Funções Utilizadas

const [date, setDate] = useState<undefined | string>(undefined);

const changeDate = (value: Date | undefined) => {

setDate(value?.toISOString());

};

const getDate = (date?: string) => {

if (date) {

return new Date(date);

}

return undefined;

};

Utilização

<DateInput

date={getDate(date)}

placeHolder="Escolha uma data"

onChange={(date) => changeDate(date)}

⁠

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.