fala Mestres beleza no vídeo de hoje nós vamos ver aqui como trabalhar com data e hora nos componentes de seleção né que é o ch os famosos pickers aí o date time picker que é o pacote que nós vamos trabalhar pro usuário selecionar tanto hora quanto também o dia né a data ali que nos interessa ali que a gente pode estar fazendo uso aí da nossa aplicação tá então antes da gente ir pro vídeo gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também acompanha a gente nas redes sociais
os links estarão todos aí na descrição meu nome é jancer eu sou desenvolvedor aqui na Mestres e bora lá para mais um [Música] conteúdo bom então eu estou aqui na nossa aplicação na nossa tela inicial e para para essa funcionalidade nós vamos usar um pacote tá que é o datetime picker e feito aí pelo react Native community que é um pacote da comunidade então então para instalar Esse pacote nós temos aqui o comando né npx Expo install react Native community bar date picker tá E aí o Expo vai instalar a versão do react Native commun
compatível com a sdc que nós estamos usando que no meu caso aqui ele instalou o date picker na versão 6.7.3 tá então com esse pacote instalado ele vai exportar aqui pra gente o date time picker que é a componente que nós vamos usar Então eu tenho aqui uma View por exemplo aqui nessa View eu já posso colocar a componente o date time picker e ele vai esperar uma propriedade que é o valor que seria o valor atual né o valor selecionado eu vou fazer aqui simplesmente o new date que é a data atual que que
seria aí um o calendário ele tem que abrir o calend o date time pi o date picker ou time picker né que é o picker de hora ou de data ele tem que abrir com um dia Inicial uma data Inicial ou com uma hora Inicial é por isso que a gente tem que passar esse value aqui então como eu quero o date para o date time picker né para abrir com a data de hoje eu dei aqui o new date ele vai pegar a data atual que é 6 de maio de 2024 e ele já
vai abrir aqui e exibindo para mim essa data se eu clico se por exemplo se eu escolho outra data né quando eu dou aqui um ok ele tem uma outra callback né que seria o on Change né que vai ser disparada sempre que eu alterar o valor aí do meu time pick Então vamos criar umas funções aqui pra gente começar a brincar um pouco aqui com os valores e também pra gente depois ver a visualização de tempo né de escolha de hora porque aqui o date time Nós estamos vendo o date pecker né que é
a escolha de dat temos também o time picker que é a escolha de hora então no anch eu vou criar aqui uma função essa função eu vou chamar ela aqui no on Change do time pe o handle Change se olhar aqui oend sempre que eu disparo né Sempre que eu troco a data ele vai disparar um evento e vai ter um segundo parmetro aqui que é um date que é opcional ou não dependendo ali do que a gente esver escolhendo então eu vou copiar aqui essa tipagem né esses dois parâmetros junto com o tipo e
falar que o meu handle Change vai receber esses dois parâmetros na mesma estrutura porque o handle Change vai ser eu tô passando ele aqui né como parâmetro vai ser executado no onchange tá então a gente pode até colocar aqui um conso log ó desse event e também do date pra gente ver a estrutura disso aqui o meu projeto ele já tá rodando tá em outro terminal aqui e quando eu troco a data né eu escolhi aqui dia 9 dou um ok ele vai logar aqui ó Native event que tem um time stamp né e um
Tipo esse tipo aqui né set que Ou seja eu setei um novo horário e o segundo log aqui é o date né que é o nosso objeto de data que ele veio que foi a data que eu escolhei que eu escolhi se a gente olhar aqui ó é 5/09 de 2024 a hora tá a a hora atual aqui ã mas quando eu tiver no no na outra visualização que é a seleção de a seleção de hora ele vai definir aqui para mim esse essa segunda parte aqui do date que é a parte referente à hora
tá que seria hora e minuto que é o que a gente consegue definir tá então aqui a gente poderia começar a brincar um pouco aqui com os valores e por exemplo adicionar um botão aqui ã um botão para exibir o time p quando eu selecionar Quando trocar o valor do meu time Pier ele vai atualizar um state pra gente conseguir ver em tela Vamos fazer alguma coisinha aqui vou chamar aqui state n date set date ele vai ser um use state começando com a hora no caso a data né data e hora atual vou criar
um outro state aqui que vai ser o show set show falso que a gente vai usar para mostrar ou não o esse dat time picker tá então vou adicionar aqui um botão o botão do próprio react mesmo e aí nesse botão o título dele vai ser mostrar Pier e aqui no onpress Ou seja quando eu pressionar vou dar aqui um handle show criar aqui uma função né handle show essa função vou simplesmente dar um set show que é trocar aquele meu state para true né e aqui a renderização do date time picker eu vou fazer
ela condicional ou seja se o show o meu state né se ele for true eu vou mostrar o date time picker tá então quando eu clicar no meu botão ele vai mostrar aqui o picker certo e aí aqui no meu on Change Ou seja quando eu selecionar a data depois eu vou dar um set show false para trocar esse meu state ele voltou como quando eu salvei né ele recarregou aqui o vamos fazer o seguinte eu vou clicar se a gente clicar fora né ele também vai disparar se a gente ver aqui no log ó
quando eu clico fora do picker ele o evento né tem aqui o time stamp e o tipo do evento é dismissed Ou seja eu não selecionei nenhum horário né eu fechei se eu clicar em cancelar aqui também ó o tipo é dismissed tá então a gente pode usar esses tipos aí para eh ver se o usuário escolheu ou não eh o horário se ele trocou ou não né a gente pode controlar aí baseado nesse tipo desse evento tá eh mas o que que tá o que que tá acontecendo agora né como que a gente configurou
tem o botão eu clico no botão ele vai mostrar aqui o picker eu posso escolher um um um valor e se eu clicar novamente mostrar picker ele vai aparecer de novo porque a gente tá controlando aqui o show set show né para renderizar Ou não Aqui o date time picker certo então agora com isso vamos controlar o valor né então o valor aqui do date time picker não vai ser mais New date vai ser o meu state que eu chamei de date e no handle Ou seja quando eu selecionar uma nova uma nova data eu
vou simplesmente fazer um set date desse parâmetro date como o date é opcional às vezes ele pode não vir eu vou verificar aqui ó se existe o date né se esse parâmetro date veio eu vou atualizar o meu state tá então agora se eu selecionar por exemplo dia 9 dou um ok vou clicar em mostrar picker de novo ele não tá certo não tá correto deveria est selecionado o dia 9 correto date valid date é agora funcionou era coisa de state tá agora vou selecionar o dia 11 dou um ok vou clicar em mostrar picker
de novo tá selecionado o dia 11 tá então a gente já tá conseguindo controlar E como eu já consigo controlar eu posso simplesmente renderizar aqui em tela eu vou colocar aqui acima do botão um texto que vai ser o nosso vai mostrar né a data selecionada então eu vou fazer basicamente aqui um renderizar aqui né o date e Aqui nós temos o to date string to ISO string vamos usar o ISO string vamos usar o ISO na verdade não vamos usar o locko loc date string não é date string é só loc string pra gente
conseguir visualizar isso aqui melhor porque ele vai mostrar aqui o PM na verdade não vamos usar o is né string que é o formato a padrão de exibição de data para vocês aí tá bem pequeno né Vamos definir o estilo aqui fonte size 20 para facilitar a visualização tá então agora eu já tenho o picker eu já posso selecionar a data né se eu trocar aqui a data para dia 13 dia 13 Olha lá Ficou ali o o dia 13 tá então eu já tô conseguindo controlar esse state e aqui agora vamos ver a outra
visualização do datetime picker né porque noss Nós estamos vendo aqui a seleção de data mas nós podemos também ver a fazer a seleção de hora né então ele tem aqui Um mode e esse mode né esse modo no caso aqui eu vou passar time que é a seleção de hora então agora quando eu clicar em mostrar Pier ele vai me mostrar aqui o a interface para mim selecionar a hora né Então nesse caso aqui tá de 12 horas ele tá aqui com o formato amm né então AM e antes de meio-dia né PM é pós
meio-dia eu eu penso assim para facilitar a interpretação eu posso selecionar aqui a hora e o minuto dou um ok Na verdade eu escolhi o que ali vamos deixar 125 e Aqui nós temos ó no no no print que foi feito 155 Por que que tá 155 Porque aqui nós estamos usando o ISO string né e ISO string o difença do time stamp do Brasil pro ISO são de 3 horas né pro pro horário ISO ali pro zero Então tá com essas 3 horas a mais mas no caso eu selecionei 12 né 12 com TR
15 se eu selecionar TR 3 me0 ficou lá 18:30 tá com algum bug aqui de coisa de sincronia que que esse show meu aqui ele não tá da melhor forma possível às vezes dá esse essa piscadinha aí na tela mas eh é só do exemplo aqui a gente poderia controlar isso aqui de uma forma melhor sem problema tá mas não é o foco da aula ficar aqui brincando com os States para mostrar ou não a coisa o principal aqui é a a componente e aqui para finalizar vamos olhar aqui um uma outro um outro parâmetro
que é esse is2 hour que no caso eu posso passar el como true né dessa forma eu posso só deixar o is 24 hour que ele vai entender como true e nesse caso aqui ele vai me mostrar a seleção de horários no formato de 24 horas então aqui eu tenho né de de 12 de no caso de é 12 horas e aqui internamente eu tenho no caso de 12 a 1 de 1 a 12 e aqui na roda interna eu tenho de 13 a z0 que seria meia-noite então se eu quisesse escolher por exemplo à
tarde né A ou melhor uma da manhã seria aqui 1:30 e ele marcou lá 4:30 por causa das 3 horas de diferença aí que a gente tá exibindo o ISO string tá então para essa aula é isso Lembrando que esse essa componente ela pode ser usada tanto para Android quanto para iOS Nós estamos vendo exemplo aqui no Android porque eu estou rodando o projeto no Windows Tá mas essa biblioteca também ela tem suporte para iOS Beleza então para essa aa é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo
abaixo e é isso aí muito obrigado e até a próxima [Música]
