Pular para o conteúdo
Ajude a traduzir esta página

Seletor de intervalo de data ⚡️

Seletores de data permitem ao usuário selecionar um intervalo de datas.

⚠️ Pro component

The date range picker is intended for Material-UI X Pro, a commercial set of advanced components built on top of the community edition (MIT license).

Esta extensão paga incluirá mais componentes avançados (um data grid rico, seletor de intervalo de data, arrastar & soltar na visualização em árvore, etc.). Acesso antecipado começa com um preço acessível.

Os seletores de intervalo de datas permitem que o usuário selecione um intervalo de datas.

Requisitos

Este componente depende da biblioteca de gerenciamento de datas da sua escolha. Ele suporta date-fns, luxon, dayjs, moment e qualquer outra biblioteca através da interface publica dateAdapter.

Por favor, instale qualquer uma destas bibliotecas e configure corretamente o mecanismo de data encapsulando na raiz dos componentes (ou o nível mais alto que você deseja que os seletores estejam disponíveis) com LocalizationProvider:

// ou @material-ui/lab/dateAdapter/{dayjs,luxon,moment} ou qualquer adaptador válido de date-io
import DateFnsAdapter from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

function App() {
  return (
    <LocalizationProvider dateAdapter={DateFnsAdapter}>...</LocalizationProvider>
  );
}

Utilização Básica

Note que você pode passar quase qualquer propriedade de DatePicker.

to

Modo estático

É possível renderizar qualquer seletor em linha. Isto permitirá construir contêineres customizados de popover/modal.

June 2023
July 2023
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

Responsividade

O componente de seletor de intervalo de data é projetado e otimizado para o dispositivo em que ele é executado.

  • The MobileDateRangePicker component works best for touch devices and small screens.
  • The DesktopDateRangePicker component works best for mouse devices and large screens.

By default, the DateRangePicker component renders the desktop version if the media query @media (pointer: fine) matches. Isto pode ser customizado com a propriedade desktopModeMediaQuery. Isto pode ser customizado com a propriedade desktopModeMediaQuery.

to
to

Propriedades de formulário

The date range picker component can be disabled or read-only.

to
to

Número diferente de meses

Observe que a propriedade calendars só funciona no modo desktop.

1 calendar

to

2 calendars

to

3 calendars

to

Desabilitando datas

Desabilitar datas se comporta da mesma forma que DatePicker.

to

Componente de entrada customizado

É possível customizar o componente de entrada renderizado com a propriedade renderInput. Para o DateRangePicker ele recebe 2 parâmetros– para o campo inicial e final, respectivamente. Se você precisar renderizar campos de entrada customizados, certifique-se de encaminhar ref e inputProps corretamente para os componentes de entrada.

to

Renderização customizada do dia

Os dias exibidos são customizados com uma função na propriedade renderDay. You can take advantage of the internal DateRangePickerDay component.

June 2023
July 2023
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    label="date range"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderDay={renderWeekPickerDay}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

API