06 set

Usando jquery datepicker no Contact Form 7

Categoria: - Comentários (3)

jQuery UI Datepicker

jQuery UI Datepicker (clique na imagem para ampliar)

Voltando a falar sobre o plugin Contact Form 7 (CF7), que na minha opinião, é um dos melhores plugins para criação de formulários que existe, hoje vou ensinar a usar a biblioteca jQuery UI nativa do WordPress para adicionar um calendário “datepicker” num campo de formulário do CF7.

No artigo anterior, que você pode conferir no link http://wpmidia.com.br/tutoriais/aplicando-mascaras-nos-campos-de-formulario-contact-form-7/, aprendemos a adicionar uma máscara de digitação para datas num campo tipo texto do CF7, mas neste artigo vamos incrementar um pouco mais o nosso formulário.

O processo de criação do formulário não muda muito, a única coisa que vai mudar, é que vamos ter que atribuir uma classe ao campo data para que o efeito seja ativado.

Observe:

Contact Form 7 - Datepicker

Contact Form 7 – Datepicker (clique na imagem para ampliar)

No campo “class”, foi adicionada a classe “datepicker”, que vai auxiliar na ativação do efeito.

Agora, vamos abrir o arquivo functions.php do seu tema ativo e inserir o código abaixo:

Entendendo o código

A função wp_enqueue_script() foi utilizada para “chamar” o script jquery-ui-datepicker nativo do WordPress:

A função wp_enqueue_style() foi utilizada para carregar os estilos do calendário. Note que eu utilizei o arquivo de estilos do CDN do Google, mas você pode baixa-lo e armazenar em algum lugar na pasta do seu tema:

O código abaixo ativa o Datepicker:

O código abaixo é uma espécie de add-on ao jQuery UI Datepicker que traduz o calendário para o nosso idioma:

Agora é só fazer o teste pra ver se tudo está funcionando direitinho. Para maiores informações sobre o Datepicker, basta acessar o site: http://jqueryui.com/demos/datepicker/

Espero que tenham gostado da dica e se tiverem qualquer dúvida, basta comentar.

Até a próxima! :-)

Comentários ( 3 )

  • Iza

    Pessoal, baixei o locale.php em português e o site parou de funcionar, voltei o arquivo original e alterei todos os nomes dos meses para português. O único lugar onde foi alterado foi no painel administrativo geral (que antes aparecia em inglês). Na página continua em inglês. Já tentei alterar tbm o “datepicker” para português, mas não funcionou. Quando eu peço pra “inspecionar elemento da página”, ele mostra a data em inglês no widget, não sei como alterar, por favor, ajudem. Agradeço desde já!

  • Muito útil esse artigo, me tirou de um sufoco nesse exato momento.
    ^^
    Obrigado!

  • Olá

    Segui o passo a passo, mas não funcionou no meu site. Fiz num form de reservas. No form aparece direitinho, em português, mas quando recebo o e-mail a data esta no estilo americano.
    O que pode estar errado?

Envie seu comentário

Resize-me!