Seletor de hora
Seletores de horário permitem que o usuário selecione um horário.
Seletores de hora permitem que o usuário selecione um horário simples (no formato de horas:minutos). O horário selecionado é indicado pelo círculo preenchido no final do ponteiro do relógio.
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 time picker will automatically adjust to the locale's time setting, i.e. the 12-hour or 24-hour format. This can be controlled with ampm prop.
Localização
Use LocalizationProvider to change the date-engine locale that is used to render the time picker. Note that am/pm setting is switched automatically:
Responsividade
The time picker component is designed and optimized for the device it runs on.
- 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.
By default, the TimePicker component uses a @media (pointer: fine) media query to determine which version to use. Isto pode ser customizado com a propriedade desktopModeMediaQuery.
hh:mm (a|p)m
Modo estático
It's possible to render any picker inline. This will enable building custom popover/modal containers.
1
2
3
4
5
6
7
8
9
10
11
12
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StaticTimePicker
displayStaticWrapperAs="mobile"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} variant="standard" />}
/>
</LocalizationProvider>05
10
15
20
25
30
35
40
45
50
55
00
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StaticTimePicker
ampm
orientation="landscape"
openTo="minutes"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} variant="standard" />}
/>
</LocalizationProvider>