Skip to content
julho 16, 2008 / cassiomarques

Helper para usar o datepicker do JQuery no Rails

Nos dois projetos Rails em que estou trabalhando atualmente deixei de usar a dupla Prototype + Scriptaculous (padrão do Rails) e instalei o plugin jrails. Esse plugin possibilita substituir o Prototype e o Scriptaculous pelo JQuery nas aplicações Rails, mantendo funcionalidade da grande maioria dos helpers para javascript (toda aquelas coisas de rjs, etc), mas gerando código javascript compatível com o JQuery.
Fiz essa mudança porque o JQuery facilita muito a criação de interfaces mais atrativas, coisa muito importante para quem cria aplicações web corporativas. Com o esquema de plugins do JQuery, é possível criar aplicações muito responsivas, funcionais e bonitas.
Recentemente foi criada uma biblioteca para o JQuery chamada JQuery-UI, ou seja, um conjunto de funcionalidades específicos para a criação de interfaces com o usuário. Um dos componentes que acho realmente interessantes nesta biblioteca é o Datepicker, o qual cria um calendário bem bacana em campos de formulário que devem receber datas.

A idéia então foi: Como usar isso “The Rails Way”, sem ter que ficar escrevendo toda hora o código javascript necessário para criar uma instância do datepicker associada a um campo dos meus formulários? Simples: Criei um helper para isso. Mais precisamente, criei um helper no ApplicationHelper, para que o código fique disponível nas views de toda a aplicação.

Vamos ao código!

module ApplicationHelper 
  def datepicker_tag(model, attribute, options ={}, datepicker_options = {})
    field_id = "#{model}_#{attribute}"    
    field_name = "#{model}[#{attribute}]"
    field = ::ActionView::Helpers::InstanceTag.new(model, attribute, self)        
    options = {:id => field_id, :name => field_name}.merge(options)
    datepicker_options = options_for_javascript(datepicker_options)
    js = "$(document).ready(function() { $(\"\##{field_id}\").datepicker(#{datepicker_options});});"    
    field.tag(:input, options) + javascript_tag(js)    
  end
end

O método acima cria uma tag html input e gera o código javascript necessário para fazer com que este input torne-se um datepicker. Basicamente eu utilizo helpers já existentes no Rails e crio uma instância de ActionView::Helpers::InstanceTag, a qual fica associada ao model do form. Isso é importante porque quando você precisar trazer o formulário para edição, por exemplo, o campo já virá preenchido certinho.
Em seguida utilizo essa instância para criar uma tag do tipo input e concateno a saída disso tudo com o código javascript necessário para criar um datepicker associado ao nosso input.
Notem que as opcões recebidas como argumentos do método são utilizadas para inicializar o input e o objeto javascript criados.

Os parâmetros para o método são:
model: O model que está sendo criado/editado no form.
attribute: O atributo do model ao qual o datepicker será associado
options: hash de opções que devem ser passadas para a criação do input. Basicamente as mesmas utilizadas em helpers como o text_field_tag, etc.
datapicker_options: hash com opções que serão passadas para a criação do javascript que inicializa o datepicker. Possíveis valores para este campo podem ser obtidas na documentação do datepicker.

Para usar isso, precisamos incluir os arquivos do JQuery no seu layout. Como o JQuery-UI pode ser baixado de forma personalizada, ou seja, somente os arquivos que lhe interessam (para diminuir o footprint da biblioteca), o nome dos arquivos podem variar um pouco. De qualquer forma, basta baixar os arquivos javascript necessários (o core do jquery-ui e o arquivinho para o datepicker) e os arquivos CSS. Coloque tudo em seu lugar dentro da pasta public do seu projeto e adicione tudo na sua view, usando javascript_include_tag e stylesheet_include_tag.

Considere agora que você quer criar um formulário para um (adivinhem!) aluno, e que este cara possui uma data de nascimento. Seria legal que esse campo para a data de nascimento tivesse um datepicker bonitinho né?

<% form_for(@aluno) do |form| %>
   <%= datepicker_tag :aluno, :nascimento, :size => 10 %>
<% end %>

A saída disso é algo assim:

<input id="aluni_nascimento" name="aluno&#91;nascimento&#93;" size="10" />
<script type="text/javascript">
//<!&#91;CDATA&#91;
$(document).ready(function() { $("#aluno_nascimento").datepicker({});});
//&#93;&#93;>
</script>

Se quiser pode passar opções específicas do datepicker em um segundo hash.

Estou pensando em juntar isso com mais algumas coisas que usam o JQuery-UI e criar um plugin, vamos ver como anda meu tempo…

6 Comentários

Deixe um comentário
  1. Fabiano / ago 3 2008 1:46 am

    Cara.. sinceramente, não sei se há a NESCESSIDADE de um plugin, eu sou fã deles, mas como diz o criador de um plugin datepicker: tradução~ “rails precisa tanto de + um plugin datepicker quanto eu preciso de outro furo na minha cabeça”.. kkkk
    Resumindo, acho que é legal fazer plugin, até pq eh jQuery neh, num sei se tem algum pra isso aí, eu particularmente ainda não usei.. quando preciso de algo procuru um plugin geral, minha escolha foi o Rails Date Kit, mas tem pelo menos outros 2 que fazem o mesmo trampo

  2. cassiomarques / ago 3 2008 2:05 am

    É Fabiano, concordo com você que um plugin apenas para isso seria exagero. Eu penso em fazer algo com o JQuery que envolva várias outras coisas do JQuery UI além do datepicker, um plugin bem focado em interface com o usuário mesmo…
    Mas são apenas algumas idéias mesmo, por enquanto estou completamente sem tempo…

  3. Andrey Viana / set 4 2008 5:03 pm

    Legal, mas eu tenho uma sugestão (que eu uso) que acho bem mais fácil de ser usado e implantado…

    Eu crio por padrão TODOS os meus campos de data com o final (ou no meio) a palavra date, por exemplo born_date (data de nascimento).

    Não precisa de helper nem nada disso, crio um input normal na view. Com o jQuery e o datePicker eu faço tudo isso em uma única linha:

    $(‘input[@name~=”date”]’).datePicker();

    Pronto! Se em qualquer parte do campo tiver a palavra date, ele já vai incluir o datePicker no campo input.

    O código HTML fica mais limpo, e muito mais fácil para manter o código :-)

    • phofke / jul 23 2009 4:46 pm

      Excelente solução.

  4. cassiomarques / set 4 2008 5:09 pm

    @Andrey, realmente muito bacana essa sua solução! Eu ainda não estou muito acostumado a usar os selectors do Jquery, acho que por isso acabo não enxergando soluções como a sua. Obrigado!

  5. Kleber / maio 27 2010 12:37 am

    Fala galéra, como alterar o tamanho do datapiker ele aparece mto grande!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: