Inserindo um calendário javascript para entrada de data no rails bruno jun 12

Para inserir um calendário em uma aplicação rails, vamos utilizar o plugin Calendar Date Select. Ele é um calendário em Javascript que utiliza a biblioteca Prototype.

Algumas demonstrações do funcionamento podem ser vistas em http://electronicholas.com/calendar.

Para instalá-lo:

script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select

Após instalado o plugin voce deve inserir o calendário na view em que voce deseja:

[source:html]<%= calendar_date_select_includes “silver”%>[/source]

No caso acima escolhemos a cor cinza (“silver”) mas também é possível escolher outras cores como vermelho (“red”) e azul (“blue”).

Insira também a biblioteca Prototype caso ela já não esteja incluída:

[source:html]<%= javascript_include_tag :defaults %>[/source]

Agora é só inserir o código para o calendário como abaixo:
[source:html]<%= calendar_date_select_tag “data” %>[/source]

Existem várias opções de customização do calendário que podem ser encontradas no site oficial

Traduzindo o calendário para português

Para passar os dias da semana e a data para o formato d/M/Y deve-se ir no environment.rb e adicionar:

[source:ruby]CalendarDateSelect.format = :italian[/source]

Obs.: O formato italiano corresponde ao formato (‘d/M/Y’)

Deve-se adicionar o javascript correspondente à esse formato, incluindo na view:

[source:html]<%= javascript_include_tag “calendar_date_select/format_italian” %>[/source]

Para a tradução para o português, deve-se criar o arquivo pt.js em public/javascripts/calendar_date_select/locale

pt.js
[source:ruby]
Date.weekdays = $w(‘D S T Q Q S S’);
Date.months = $w(‘Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro’);

Date.first_day_of_week = 0

_translations = {
“OK”: “OK”,
“Now”: “Agora”,
“Today”: “Hoje”
}
[/source]

E para que o calendário adote o idioma português como configurado acima basta adicionar a variável [source:ruby]:locale => ‘pt’[/source] como mostrado abaixo.

[source:ruby]<%= calendar_date_select_includes “silver”, :locale => ‘pt’ %>[/source]

Comentários

  • bruno disse:

    Fabiano,

    Não estou utilizando nenhum tratamento especial. Utilizo o campo no mysql do tipo date ao invés de datetime. Para validação da data utilizo o plugin validates_date_time (http://agilewebdevelopment.com/plugins/validates_date_time).

  • Fabiano disse:

    Certo.. obrigado !
    Jah fiz funcionar, usei um carinha diferente chamado Rails Date Kit.. a verdade é que optei por ele por motivos meramente estéticos e de eficiência sabe, ele cumpre a função :D
    Meu problema era passar a data no formato Brazuca d/m/A mas dai em JS eu traduzo para ISO :P
    Eu sei que podia fazer um tratamento muito melhor sobre isso no model, mas…. :)

  • Fabiano disse:

    Estou precisando seriamente de um calendário de tela inteira agora, você tem alguma sugestão ??
    Se não vou adaptar esse plugin mesmo usando embedded => true

  • bruno disse:

    Fabiano,

    Tenho usado o Calendar Date Select e ele tem me servido bem, por isso o recomendo. Uma possibilidade para colocar um calendário na tela inteira seria (como voce falou) utilizando o embedded => true . E caso voce queira modificar o seu visual basta alterar o css!

  • Hugo Maia disse:

    Alguém sabe se tem como restringir os meses como se pode fazer com os anos (year_range)?

  • Claudiney Veloso disse:

    O calendário esta funcionando perfeitamente, só que não esta gravando na tabela… o que estou fazendo de errado??

  • Claudiney Veloso disse:

    esqueci de te mostrar como esta meu codigo.

  • Silvio Fernandes disse:

    Amigo,
    na tradução dos meses esta faltando outubro

    Date.months = $w(‘Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Novembro Dezembro’);

    []‘s