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

Seletor de data

Seletores de data permitem que o usuário selecione uma data.

Seletores de data permitem que o usuário selecione uma data. Seletores de data permitem que o usuário selecione uma data.

  • Diálogos em dispositivos móveis
  • Menu suspenso com campo de texto em desktop

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/Adapter{DayJS,Luxon,Moment} ou qualquer adaptador válido de date-io
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

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

Utilização Básica

O seletor de data será renderizado como um diálogo modal no dispositivo móvel, e um campo de texto com um popover no desktop.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} variant="standard" />}
  />
</LocalizationProvider>

Responsividade

O componente seletor 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 DatePicker 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

Localização

Use LocalizationProvider para alterar a date-engine de localização que é usada para renderizar o seletor de data. Aqui esta um exemplo de alteração da localidade com o adaptador date-fns:

Exemplos de exibições

É possível combinar year, month, e date para seleção na exibição. As exibições aparecerão na ordem em que estão incluídas no array views.

Modo estático

É possível renderizar qualquer seletor sem usar um modal/popover e campos de texto. Isso pode ser útil na construção de containers customizados de popover/modal.

<LocalizaitonProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker
    displayStaticWrapperAs="desktop"
    openTo="year"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} variant="standard" />}
  />
</LocalizaitonProvider>

Orientação paisagem

Para ter seu uso facilitado, o seletor de data irá automaticamente alterar o leiaute entre retrato e paisagem devido a subscrição de alterações com o evento window.orientation. Você pode forçar um leiaute específico usando a propriedade orientation.

SELECT DATE

Tue, Jan 26

<LocalizaitonProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker
    orientation="landscape"
    openTo="date"
    value={value}
    shouldDisableDate={isWeekend}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} variant="standard" />}
  />
</LocalizaitonProvider>

Subcomponentes

Alguns subcomponentes de nível mais baixo (DayPicker, MonthPicker e YearPicker) também são exportados. Estes são renderizados sem estar encapsulado ou lógica exterior (campo com mascara, valores de data e validação, etc.).

⚠️ Missing demo `pages/components/date-picker/InternalPickers.js` ⚠️

Componente de entrada customizado

É possível customizar a renderização do campo de entrada com a propriedade renderInput. Certifique-se de encaminhar ref e inputProps corretamente para o componente de entrada customizado.

<LocalizaitonProvider dateAdapter={AdapterDateFns}>
  <DesktopDatePicker
    label="Custom input"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={({ inputRef, inputProps, InputProps }) => (
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <input ref={inputRef} {...inputProps} />
        {InputProps?.endAdornment}
      </Box>
    )}
  />
</LocalizaitonProvider>

Renderização customizada do dia

Os dias exibidos são customizados com uma função na propriedade renderDay. Você pode tirar vantagem do componente interno PickersDay.

<LocalizaitonProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    label="Week picker"
    value={selectedDate}
    onChange={handleDateChange}
    renderDay={renderWeekPickerDay}
    renderInput={(params) => <TextField {...params} variant="standard" />}
    inputFormat="'Week of' MMM d"
  />
</LocalizaitonProvider>

Dados dinâmicos

Às vezes, pode ser necessário exibir informação adicional diretamente no calendário. Aqui está um exemplo de pré-busca e exibição de dados do servidor usando as propriedades onMonthChange, loading, e renderDay.

API