Rails 3.0 + jQuery Datepicker. Edit value

rubyonrails-talk
1

I recently started using jQuery and the Datepicker with an application of mine.

with the help of #213 Calendars - RailsCasts I got the datepicker working on a text_field containing a date.

Problem however is when we edit a model. Since a text_field shows the database value for a field by default, it displays the date as '2011-05-24'. When we open te datepicker on this field it defaults to 'today' since it cant read the current value of the field.

Picking a date will display it in the format specified of datepicker, but saving is no problem. I guess Rails is smart enough to figure it out between the I18n.

My question is, how can I make sure my date is displayed in the format I want it to be in the text_field of a form when editting.

2

Hi,

    There are two places were you should do it:
         - **Rails**: Best choice is [I18N API](http://guides.rubyonrails.org/i18n.html)    ,

summary: 1. Get the locales you need from 2. Place them in "config\locales" 3. In “config\aplication.rb” uncomment the lines 4. Set your default language, example for Spanish 5. Add an the file “nitializers\date_formats.rb” with the content 6. Restart the server. - : in the place where you call it add: You might want to have different regional settings (included date and time formats) for each users, then the best solution is to place the regional variable in the users models (Examples in the I18N api). Just one last think, rails will not raise and error if the format is wrong, instead will save a nil value in the database. Greetings,

3

Hi Tom,

I had a similar task lately and the solution goes roughly like this:

First you get the localization file from here: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

You need to load this together with the other jQuery js like this: <%= javascript_include_tag 'jquery/jquery.ui.datepicker-de.js' %>

After that you can setup you form like this:     <%= label :start_date, "Datum von:" %>     <%= text_field_tag :start_date, Time.now.strftime('%d.%m. %Y'), :autocomplete => "off", :class => "input_element" %>     <%= label :end_date, "bis:" %>     <%= text_field_tag :end_date, Time.now.strftime('%d.%m. %Y'), :autocomplete => "off", :class => "input_element" %>     <%= submit_tag :for, :value => t("buttons.search") %>

    <script>       $.datepicker.setDefaults( $.datepicker.regional["de"] );       $.datepicker.setDefaults({showWeek: true,                                 minDate: new Date(2011, 0, 1),                                 maxDate: "today",                                 showOtherMonths: true,                                 selectOtherMonths: true });       $('#start_date').datepicker();       $('#end_date').datepicker();     </script>

This worked for me (didn't implement the Rails side on the server yet)

4

Hi Tom,

I had a similar task lately and the solution goes roughly like this:

First you get the localization file from here: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

You need to load this together with the other jQuery js like this: <%= javascript_include_tag 'jquery/jquery.ui.datepicker-de.js' %>

After that you can setup you form like this:     <%= label :start_date, "Datum von:" %>     <%= text_field_tag :start_date, Time.now.strftime('%d.%m. %Y'), :autocomplete => "off", :class => "input_element" %>     <%= label :end_date, "bis:" %>     <%= text_field_tag :end_date, Time.now.strftime('%d.%m. %Y'), :autocomplete => "off", :class => "input_element" %>     <%= submit_tag :for, :value => t("buttons.search") %>

    <script>       $.datepicker.setDefaults( $.datepicker.regional["de"] );       $.datepicker.setDefaults({showWeek: true,                                 minDate: new Date(2011, 0, 1),                                 maxDate: "today",                                 showOtherMonths: true,                                 selectOtherMonths: true });       $('#start_date').datepicker();       $('#end_date').datepicker();     </script>

This worked for me (didn't implement the Rails side on the server yet)

5

Hi Tom,

I had a similar task lately and the solution goes roughly like this:

First you get the localization file from here: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

You need to load this together with the other jQuery js like this: <%= javascript_include_tag 'jquery/jquery.ui.datepicker-de.js' %>

After that you can setup you form like this:     <%= label :start_date, "Datum von:" %>     <%= text_field_tag :start_date, Time.now.strftime('%d.%m. %Y'), :autocomplete => "off", :class => "input_element" %>     <%= label :end_date, "bis:" %>     <%= text_field_tag :end_date, Time.now.strftime('%d.%m. %Y'), :autocomplete => "off", :class => "input_element" %>     <%= submit_tag :for, :value => t("buttons.search") %>

    <script>       $.datepicker.setDefaults( $.datepicker.regional["de"] );       $.datepicker.setDefaults({showWeek: true,                                 minDate: new Date(2011, 0, 1),                                 maxDate: "today",                                 showOtherMonths: true,                                 selectOtherMonths: true });       $('#start_date').datepicker();       $('#end_date').datepicker();     </script>

This worked for me (didn't implement the Rails side on the server yet)

6

Hi Tom,

I had a similar task lately and the solution goes roughly like this:

First you get the localization file from here:

http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

You need to load this together with the other jQuery js like this:

<%= javascript_include_tag ‘jquery/jquery.ui.datepicker-de.js’ %>

After that you can setup you form like this:

<%= label :start_date, “Datum von:” %>

<%= text_field_tag :start_date, Time.now.strftime('%d.%m.%Y'), :autocomplete => "off", :class => "input_element" %>

<%= label :end_date, “bis:” %>

<%= text_field_tag :end_date, Time.now.strftime('%d.%m.%Y'), :autocomplete => "off", :class => "input_element" %>

<%= submit_tag :for, :value => t("buttons.search") %>

This worked for me (didn’t implement the Rails side on the server yet)

7

Hi Tom,

I had a similar task lately and the solution goes roughly like this:

First you get the localization file from here: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

You need to load this together with the other jQuery js like this: <%= javascript_include_tag ‘jquery/jquery.ui.datepicker-de.js’ %>

After that you can setup you form like this: <%= label :start_date, “Datum von:” %> <%= text_field_tag :start_date, Time.now.strftime(‘%d.%m.%Y’), :autocomplete => “off” %> <%= label :end_date, “bis:” %> <%= text_field_tag :end_date, Time.now.strftime(‘%d.%m.%Y’), :autocomplete => “off” %> <%= submit_tag :for, :value => t(“buttons.search”) %>

<script>
  $.datepicker.setDefaults( $.datepicker.regional["de"] );
  $.datepicker.setDefaults({showWeek: true,
                            minDate: new Date(2011, 0, 1),
                            maxDate: "today",
                            showOtherMonths: true,
                                selectOtherMonths: true });
  $('#start_date').datepicker();
  $('#end_date').datepicker();
</script>

This worked for me (didn’t implement the Rails side on the server yet)