Skip to main content

DatePicker

Base​

Placeholder​

Selected date​

Max or Min date​

Min date​

Max date​

Min and Max date​

Date range​

Use the DateRangePicker component when you need to select a range between dates. For more details go to our Component API tab.

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 DatePicker is pt-BR and the date formatting that is displayed inside the DatePicker is by default in 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 visit our Component API tab.

import React from 'react';
// Form was imported only to exemplify the application
import { Form } from '@resultadosdigitais/tangram-components';
import { DatePicker } 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>
        <DatePicker
          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>
        <DatePicker id="ptBR" name="ptBR" placeholder="Selecione uma data" />
      </Form.Control>
      <Form.Control>
        <Form.Label htmlFor="es">es</Form.Label>
        <DatePicker
          id="es"
          name="es"
          locale={es}
          placeholder="Seleccione una fecha"
        />
      </Form.Control>
    </>
  );
}

Month picker​

Monthly navigation​

Inline style​

Positioning​

tip

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

There are different placements available for the DatePicker. For more details visit our Component API tab.

Usign with react-hook-form​

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Form, Button, Text } from '@resultadosdigitais/tangram-components';
import { DatePicker } from '@resultadosdigitais/tangram-react-datepicker';

export default function ReactHookFormIntegration() {
  const [submitted, onSubmit] = React.useState();
  const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const handleFieldChange = field => (_, date) => field.onChange(date);

  return (
    <>
      {submitted && (
        <Text>
          <strong>Submitted:</strong> <code>{JSON.stringify(submitted)}</code>
        </Text>
      )}
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Form.Label htmlFor="date">Date</Form.Label>

        <Form.Control error={Boolean(errors.date)}>
          <Controller
            control={control}
            name="date"
            render={({ field }) => (
              <DatePicker
                id="date"
                name="date"
                aria-describedby="date-feedback"
                onChange={handleFieldChange(field)}
                placeholder="Select a date"
              />
            )}
            rules={{ required: true }}
          />

          {errors.date && (
            <Form.Feedback id="date-feedback">
              This field is required
            </Form.Feedback>
          )}
        </Form.Control>
        <Button type="submit">Submit</Button>
      </Form>
    </>
  );
}

Feedback​