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.

⚠️ Componente Premium

O seletor de intervalo de data é destinado ao Material-UI X, um conjunto comercial de componentes avançados construídos pela comunidade principal (MIT license) do Material-UI.

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.

mm/dd/yyyy

to

mm/dd/yyyy

Responsividade

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

  • A versão "móvel" funciona melhor para dispositivos de toque e telas pequenas.
  • A versão "desktop" funciona melhor para dispositivos com mouse e telas grandes.

Por padrão, o componente DateRangePicker usa uma consulta de mídia @media (pointer: fine) para determinar qual versão usar. Isto pode ser customizado com a propriedade desktopModeMediaQuery.

mm/dd/yyyy

to

mm/dd/yyyy

mm/dd/yyyy

to

mm/dd/yyyy

Número diferente de meses

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

1 calendar

mm/dd/yyyy

to

mm/dd/yyyy

2 calendars

mm/dd/yyyy

to

mm/dd/yyyy

3 calendars

mm/dd/yyyy

to

mm/dd/yyyy

Desabilitando datas

Desabilitar datas se comporta da mesma forma que DatePicker.

mm/dd/yyyy

to

mm/dd/yyyy

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.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DateRangePicker
    label="Advanced keyboard"
    value={selectedDate}
    onChange={(date) => handleDateChange(date)}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <input ref={startProps.inputRef} {...startProps.inputProps} />
        <input ref={endProps.inputRef} {...endProps.inputProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

Modo estático

É possível renderizar qualquer seletor sem usar um modal ou popover. Nesse caso use StaticDateRangePicker.

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

API