Pular para o conteúdo principal

DatePicker

Base​

Placeholder​

Data selecionada​

Data mínima ou máxima​

Mínima​

Máxima​

Mínima e Máxima​

Intervalo entre datas​

Use o componente DateRangePicker quando precisar selecionar um intervalo entre as datas. Para mais detalhes acesse nossa aba de API do componente.

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 DatePicker é pt-BR e a formatação da data que é exibida dentro do DatePicker 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 { 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>
    </>
  );
}

Seleção de mês​

Navegação através do mês​

Estilo inline​

Posicionamento​

Dica

O DatePicker 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 DatePicker. Para mais detalhes acesse nossa aba de API do componente.

Utilizando com 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​