Pular para o conteúdo principal

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

Dica

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

Dica

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.

Feedback