Pular para o conteúdo

Seletor de intervalo de data

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

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

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.

October 2022
SMTWTFS
November 2022
SMTWTFS
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <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. This can be customized with the desktopModeMediaQuery prop.

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.

October 2022
SMTWTFS
November 2022
SMTWTFS
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <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>