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​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.