Este artigo demonstra o uso do input type=“date” em HTML junto com a implementação prática.
Como usar o tipo de entrada = “data” em HTML?
O 'input type='data'' pode ser usado em vários sites, como sites de saúde, sites de reserva de companhias aéreas, sites de comércio eletrônico, sites de redes sociais, etc. A sintaxe do seletor de datas é indicada abaixo:
< entrada tipo = 'data' eu ia = '' nome = '' >
Os atributos utilizados nos trechos de código acima são:
- Primeiro, o “ tipo ” permite que o campo de entrada atue como um seletor de data no qual o usuário pode escolher qualquer data.
- A seguir, o “ eu ia ” define a exclusividade desse elemento. Ao usá-lo, o elemento pode ser selecionado e aplicar a funcionalidade JavaScript.
- Depois disso, o “ nome ” especifica o nome desse elemento. Ele fornece ajuda no processo de validação para obter o valor do elemento selecionado.
Para aumentar o nível de compreensão, vamos percorrer diferentes exemplos:
Exemplo 1: Usando type= “data” em HTML
No arquivo HTML, crie um “
< forma >
< rótulo para = 'data de afiliação' > Selecione sua data de ingresso: < / rótulo >
< entrada tipo = 'data' eu ia = 'data de afiliação' nome = 'data de afiliação' >
< / forma >
No trecho de código acima:
- Primeiro, o “
” tag é utilizada na qual os dados fictícios são colocados e o valor de “ data de afiliação ” foi fornecido ao “ para ” atributo. - A seguir, o “
” é usada com um valor de “ data ” ao seu “ tipo ” atributo. - Depois disso, defina o valor de “ data de afiliação ' para o ' eu ia ” atributo. Além disso, defina o valor de “ nome ” atributo de acordo com a necessidade.
Após a execução do trecho de código acima, a página da Web aparece assim:
O gif acima ilustra que o seletor de data foi criado usando input type= “data” em HTML.
Exemplo 2: Recuperando Data Usando JavaScript
Para recuperar os dados, os usuários podem utilizar as funcionalidades do JavaScript. Para um melhor entendimento, acesse o bloco de código abaixo:
< botão ao clicar = 'recuperarData()' >Obter data< / botão >< roteiro tipo = 'texto/javascript' >
função recuperarData ( ) {
era dateInput = document.getElementById ( 'data de afiliação' ) ;
var selecionadoDate = dataEntrada. valor ;
alerta ( 'Data selecionada: ' + data selecionada ) ;
}
< / roteiro >
No trecho de código acima:
- Primeiro, o “ recuperarData() ” A função é criada dentro do “