Rails 3.1 text_field form helper and jQuery datepicker date format

Question

I have a form field in my Rails view:

<%= f.text_field :date, :class => "datepicker" %> 

The javascript function converts all input fields of this class to jQueryUI datepicker.

 $(".datepicker").datepicker({ dateFormat : "dd MM yy", buttonImageOnly : true, buttonImage : "<%= asset_path('iconDatePicker.gif') %>", showOn : "both", changeMonth : true, changeYear : true, yearRange : "c-20:c+5" }) 

So far so good. I can edit the record, and it correctly saves the date to the database. My problem is when I want to edit the record again. When the form is pre-populated from the record, it is displayed in the format "yyyy-mm-dd". Javascript only formats the dates selected in the datepicker control. Is there a way to format the date retrieved from the database? At what stage can I do this?

Thanks, Dani.

Below is a more detailed description of my form, which applies to two files, a view and a partial one. Here is the view:

 <%= form_tag("/shows/update_individual", :method => "put") do %> <% for show in @shows %> <%= fields_for "shows[]", show do |f| %> <%= render "fields", :f => f %> <% end %> <% end %> <%= submit_tag "Submit"%> <% end %> 

And here is a partial view of _fields :

 <p> <%= f.label :name %> <%= f.text_field :name %> </p> <p> <%= f.date %> <%= f.label :date %> <%= f.text_field :date, :class => "datepicker" %> </p> 

Controller Code:

 def edit_individual @shows = Show.find(params[:show_ids]) end 

I added the following to environment.rb :

 Date::DATE_FORMATS.merge!( :default => "%d %B %Y" ) 

Now it displays the correct format when I use @ show.date in the view, but the form helper still displays the raw format.

Answer 1

SOLVED: I pass :value => show.date , as suggested by Jayendra above. The reason it didn't work was because I did not pass the show object from the parent view. I changed the render line to include it, now the parent view looks like this:

 <%= form_tag("/shows/update_individual", :method => "put") do %> <% for show in @shows %> <%= fields_for "shows[]", show do |f| %> <%= render "fields", :f => f, :show => show %> <% end %> <% end %> <%= submit_tag "Submit"%> <% end %> 

Answer 2

JQuery datepicker will not format a pre-populated date.
You will need to process it on the side of the rails using a formatted date with a text field, instead of the raw date, which has the default format "yyyy-mm-dd".

Example -

 <%= f.text_field :date, :class => "datepicker", :value => @model.date.strftime("%d %m %Y") %> 

Other examples @ Rails date format in text box

Answer 3

if you are using mysql database, you can format the date in the query itself.

Code example

  date_format(date_field,"%d %m %y") 

Answer 4

What I ended up with is simply to create a normal text input and pre-populate it with an ISO date and additional information to mark it as a date input (say, rel = "date").

On the client side, I have JavaScript to create a new hidden input that accepts the name of the original field (thus, overriding it, for good measure, I also remove the name property of the original). Datepicker is bound to the source field and uses altField / altFormat to synchronize the hidden field with the ISO date.

 // used in jQuery .each function create_datepicker_for(_, el) { var e = $(el), mirror, date; // attach a hidden field that mirrors the proper date mirror = $('<input type="hidden"></input>') .prop('name', e.prop('name')) .insertAfter(e); if (e.val()) { date = new Date(e.val()); } e .prop('name', '') /* make sure this is not sent to the application */ .datepicker({ altField: mirror, /* "mirror" is the hidden field */ altFormat: 'yy-mm-dd' /* you do not want anything but ISO */ }); if (date) { e.datepicker('setDate', date) } } 

Everything seems to be synchronized, sending the correct date format to the application and degrading as expected.