Skip to main content

DateRangePicker

Base​

Placeholder​

Double calendar​

Date range​

Selected range​

Min date​

Max date​

Min and max date​

Dynamic​

Localization​

tip

When changing the locale, the component does not apply date formatting automatically. Pass the desired formatting for each locale you use.

The default location of the DateRangePicker is pt-BR and the date formatting that is displayed inside the DateRangePicker defaults to the format dd/mm/yyyy. To change this default, use the date-fns library.

Use date-fns/locale to change the locale and dateFormat to format the date. For more details go to our Component API tab.

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>
    </>
  );
}

Inline style​

Positioning​

tip

DateRangePicker adjusts its positioning automatically if there is not enough space on the screen to display the content at the defined position.

There are different placements available for the DateRangePicker. See the component's API for more details. For more details visit our Component API tab.

Feedback​