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

The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.

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

Modo estático

It's possible to render any date picker without the modal/popover and text field. Isso pode ser útil na construção de containers customizados de popover/modal.

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

Responsividade

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

  • The MobileDatePicker component works best for touch devices and small screens.
  • The DesktopDatePicker component works best for mouse devices and large screens.

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

Propriedades de formulário

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

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:

Jalali calendar system

Install date-fns-jalali and use @date-io/date-fns-jalali adapter to support Jalali calendar.

<LocalizationProvider dateAdapter={AdapterJalali}>
  <DatePicker
    mask="____/__/__"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

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.

Orientação paisagem

For ease of use, the date picker will automatically change the layout between portrait and landscape by subscription to the window.orientation change. Você pode forçar um leiaute específico usando a propriedade orientation.

Select date

Tue, Jun 13

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker<Date>
    orientation="landscape"
    openTo="day"
    value={value}
    shouldDisableDate={isWeekend}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Subcomponentes

Some lower-level sub-components (CalendarPicker, MonthPicker, and YearPicker) are also exported. Estes são renderizados sem estar encapsulado ou lógica exterior (campo com mascara, valores de data e validação, etc.).

Componente de entrada customizado

You can customize the rendering of the input with the renderInput prop. Certifique-se de encaminhar ref e inputProps corretamente para o componente de entrada customizado.

<LocalizationProvider 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>
    )}
  />
</LocalizationProvider>

Renderização customizada do dia

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

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker
    displayStaticWrapperAs="desktop"
    label="Week picker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderDay={renderWeekPickerDay}
    renderInput={(params) => <TextField {...params} />}
    inputFormat="'Week of' MMM d"
  />
</LocalizationProvider>

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