Seletores Data / Hora

Seletores de data e seletores de hora fornecem uma maneira simples de selecionar um único valor de um conjunto pré-determinado.

• Em dispositivos móveis, seletores são melhores aplicados quando mostrados em diálogos de confirmação.
• Para exibição em linha, como em um formulário, considere usar controles compactos, como botões suspensos segmentados.

Componentes React

Seletor de data

⚠️ O suporte dos navegadores aos controles de entrada nativos não é perfeito.

Um exemplo de seletor de data nativo com type="date".

• date-fns
• Day.js
• Luxon
• Moment.js

// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install -s @date-io/dayjs
// or for Luxon
npm install -s @date-io/luxon
// or for Moment.js
npm install @date-io/moment

Um exemplo de seletor de data & hora nativo com type="datetime-local".

// date-fns
import DateAdapter from '@mui/lab/AdapterDateFns';
// or for Day.js
import DateAdapter from '@mui/lab/AdapterDayjs';
// or for Luxon
import DateAdapter from '@mui/lab/AdapterLuxon';
// or for Moment.js
import DateAdapter from '@mui/lab/AdapterMoment';

function App({ children }) {
  return (
    <LocalizationProvider dateAdapter={DateAdapter}>{children}</LocalizationProvider>
  );
}

Seletores nativos

⚠️ O suporte dos navegadores aos controles de entrada nativos não é perfeito.

Um exemplo de seletor de hora nativo com type="time".

API

• <DatePicker />
• <DateTimePicker />
• <TextField />
• <TimePicker />