O JavaScript "datepicker" permite que você escolha uma data de um calendário suspenso interativo, em vez de digitá-lo manualmente. É utilizado em cenários em que você deseja agendar tarefas de acordo com uma data específica, como salvar uma data de nascimento. A "datepicker”Pode ser rapidamente adicionado a um“campo de entrada”Usando o“plugin jQuery““. Vários outros plug -ins datepicker também existem; no entanto, "JQuery ui datepicker”Se destaca no mercado por causa de sua natureza altamente flexível.

Este post discutirá o procedimento para usar um JavaScript datepicker. Então vamos começar!

JQueryui DatePicker Plugin

O jQueryui “datepicker”O plug -in permite que o usuário insira as datas visualmente. Ele também permite alterar facilmente o formato de data e seu idioma, adicionar opções de navegação e limitar os intervalos de data. Para utilizar todas essas funcionalidades, Jqueryui oferece um “datepicker ()”Método e adiciona novas classes CSS às páginas HTML, mudando sua aparência.

Sintaxe

$ (seletor).datepicker (opções);

Aqui o "Seletor”O parâmetro representa os seletores CSS como“div"Ou qualquer nó do modelo de objeto de documento, e"opções”É um parâmetro opcional que compreende opções diferentes, como "DateFormat", "Clostext", "DayNames".

Agora, vamos para a implementação do JavaScript “datepicker”.

Como usar o JavaScript DatePicker

Para fins de demonstração, criaremos um aplicativo JavaScript e adicionaremos a funcionalidade de um básico “datepicker" para um campo de entrada. Para fazer o mesmo, siga as instruções passo a passo dadas:

Etapa 1: Importar bibliotecas necessárias

Primeiro de tudo, importe as bibliotecas necessárias no arquivo HTML para usar o plug -in JQuery UI:

Etapa 2: Adicione elementos HTML

Na próxima etapa, crie os elementos HTML desejados em seu aplicativo. No nosso caso, primeiro adicionaremos um “Título” na tag “”:

Então, um título com o “

”Tag e um parágrafo com o“

”Tag, dentro do“" marcação:

Demonstração de usar JavaScript DatePicker

Insira a data:

Além disso, no adicionado “campo de entrada”, Um calendário interativo aparecerá em uma sobreposição quando o campo de entrada estiver focado.

Etapa 3: código de arquivo JavaScript

Mude para o seu arquivo JavaScript e escreva o seguinte código para especificar o ID do campo de entrada “#datepicker" como "Seletor”Parâmetro do“datepicker ()”Método. Aqui, você também pode adicionar algumas "opções" de configuração avançada relacionadas ao JavaScript "datepicker“Como alterar o formato da data:

$ (function ()
$ ("#datepicker").datepicker ();
DateFormat: "yy-mm-dd"
);

Etapa 4: Código de arquivo CSS

Para melhorar a aparência do aplicativo JavaScript, defina o estilo de elementos HTML adicionados no arquivo CSS. Por exemplo, adicionaremos a cor de fundo para “corpo“, Cor de texto, e a família de fontes para o "H1" cabeçalho e "P" elementos de parágrafo:

corpo
cor de fundo: póblue;

H1
Cor: RGB (21, 7, 145);
Font-Family: 'Courier New', Courier, Monospace;

P
Cor: RGB (37, 25, 5);
Font-Family: Courier;

Etapa 5: Link CSS e JavaScript ao arquivo HTML

Por fim, vincule os arquivos CSS e JavaScript ao arquivo JavaScript Project HTML:

Aqui está como nosso “JavaScript datepicker.html”O arquivo parece:

Etapa 6: Execute o aplicativo JavaScript

Depois de adicionar todo o código necessário, clique com o botão direito do mouse no arquivo html e no menu de contexto aberto, selecione o “Aberto com servidor ao vivo”Opção:

Seu aplicativo JavaScript criado agora será executado no navegador. Clique no "campo de entrada”E escolha uma data entre“datepicker”:

Mostramos a você o método para utilizar um básico JavaScript datepicker. Você pode explorar ainda mais conforme necessário.

Conclusão

Jqueryui oferece um “datepicker ()”Método que permite escolher uma data de um calendário suspenso interativo, em vez de digitá-lo manualmente. Um JavaScript DatePicker é usado em cenários em que você deseja agendar tarefas de acordo com uma data específica, como salvar uma data de nascimento. Neste post, discutimos o método para adicionar a funcionalidade de um básico “datepicker”Para um campo de entrada.