Instalando seletor data e hora | Jancer

Neste tutorial, vamos aprender a usar o pacote @react-native-community/datetimepicker para implementar seletores de data e hora em aplicações Expo.

Instalação do Pacote

Primeiro, instale o pacote com o comando:

Isso garantirá a versão compatível com seu SDK do Expo.

Implementação Básica

O componente DateTimePicker requer:

• value: Data/hora inicial (ex: new Date())
• onChange: Callback quando o valor é alterado

Exemplo mínimo:

1<DateTimePicker value={new Date()} onChange={handleChange} />

Controlando a Exibição

Para mostrar/ocultar o picker:

1. Crie um state show (booleano)
2. Renderize o picker condicionalmente: {show && <DateTimePicker... />}
3. Use um botão para alternar: onPress={() => setShow(true)}

Modos de Exibição

O picker pode operar em dois modos:

• mode='date': Seleciona apenas data (padrão)
• mode='time': Seleciona apenas hora

E formatos de hora:

• is24Hour=true: Formato 24h
• is24Hour=false: Formato AM/PM

Considerações Finais

O DateTimePicker oferece:

• Suporte nativo para Android e iOS
• Controle preciso de datas/horas
• Personalização de formato e exibição

Lembre-se de tratar diferenças de fuso horário ao exibir valores e testar em ambos os sistemas operacionais para garantir consistência.