DateRangePicker
Base
Placeholder
Calendário duplo
Intervalo de datas
Período selecionado
Data mínima
Data máxima
Data mínima e máxima
Dinâmico
Localização
Ao alterar o locale
, o componente não aplica a formatação da data automaticamente. Passe a formatação desejada para cada locale
que utilizar.
A localização padrão do DateRangePicker
é pt-BR e a formatação da data que é exibida dentro do DateRangePicker
vem por padrão no formato dd/mm/yyyy. Para alterar esse padrão, use a biblioteca date-fns.
Use o date-fns/locale
para alterar o locale e dateFormat
para formatar a data. Para mais detalhes acesse nossa aba de API do componente.
import React from 'react';
// Form was imported only to exemplify the application
import { Form } from '@resultadosdigitais/tangram-components';
import { DateRangePicker } from '@resultadosdigitais/tangram-react-datepicker';
import { enUS, es } from 'date-fns/locale';
export default function Localization() {
return (
<>
<Form.Control>
<Form.Label htmlFor="enUS">enUS</Form.Label>
<DateRangePicker
id="enUS"
name="enUS"
locale={enUS}
dateFormat="MM/dd/yyyy"
placeholder="Select a date"
/>
</Form.Control>
<Form.Control>
<Form.Label htmlFor="ptBR">ptBR (default)</Form.Label>
<DateRangePicker
id="ptBR"
name="ptBR"
placeholder="Selecione uma data"
/>
</Form.Control>
<Form.Control>
<Form.Label htmlFor="es">es</Form.Label>
<DateRangePicker
id="es"
name="es"
locale={es}
placeholder="Seleccione una fecha"
/>
</Form.Control>
</>
);
}
Estilo inline
Posicionamento
O DateRangePicker
ajusta seu posicionamento automaticamente, caso não exista espaço suficiente na tela para mostrar o conteúdo na posição definida.
Existem diferentes posicionamentos disponíveis para o DateRangePicker
. Consulte a API do componente para mais detalhes. Para mais detalhes acesse nossa aba de API do componente.