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
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
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.
December 2020
January 2021
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StaticDateRangePicker
displayStaticWrapperAs="desktop"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} variant="standard" />
<DateRangeDelimiter> to </DateRangeDelimiter>
<TextField {...endProps} variant="standard" />
</React.Fragment>
)}
/>
</LocalizationProvider>