Pular para o conteúdo

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".

⚠️ Missing demo `DatePickers.js` ⚠️
// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install @date-io/dayjs
// or for Luxon
npm install @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 { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// or for Day.js
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
// or for Luxon
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
// or for Moment.js
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';

function App({ children }) {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      {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".

⚠️ Missing demo `TimePickers.js` ⚠️