My favorites | Sign in
Project Logo
          
Search
for
Updated Jul 12, 2007 by jtkimbell
HowToLocalize  

How to localize

Introduction

Localization is now possible in CalendarDateSelect. However, since there are so many different approaches to localization, I didn't want to get in the way of any particular system. Therefore, there are certain extensible points of calendar date select that will let you integrate the plug-in with whatever localization system you choose to use.

Details

Here is one way to localize. Somewhere in your page, before displaying your calendars, put code in like this:

Manual translation

<script type="text/javascript">
  _translations = {
    "OK": "OK",
    "Now": "Ahora",
    "Today": "Hoy"
  }

  Date.weekdays = $w("D L Ma Mi J V S");

  Date.months = $w("Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Deciembre" );
  
</script>

<%= calendar_date_select_tag "my_field", nil %>

Translation using gettext

If you're using gettext, you can do the following:

<script type="text/javascript">
  _translations = {
    "OK": "<%=_("OK")%>",
    "Now": "<%=_("Ahora")%>",
    "Today": "<%=_("Hoy")%>"
  }

  Date.weekdays = $w("<%=_("D L Ma Mi J V S")%>");

  Date.months = $w("<%=_("Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Deciembre")%>");
  
</script>

<%= calendar_date_select_tag "my_field", nil %>

Comment by kacper.ciesla, Nov 15, 2007

It would be great to add something like set_tranlation_method where somebody can provide method he's already using for msgs localization.

Comment by oterosantos, Dec 17, 2007

When I translate it I can't save the date to DB because "Enero" it's not "January" and Rails can't understand it.

How to solve this?

Comment by timcharper, Dec 17, 2007

Look in this file 1.8/usr/lib/ruby/1.8/date/format.rb

You'll need to implement your own date parsing method to grab the Spanish months it seems. I'd alias chain Date::parse and implement a catch to do something very similar to parse_us, but just create and reference a hash like Format::ES_ABBR_MONTHS

Comment by brandon.zylstra, Feb 27, 2008

maybe it would be easier to have the calendar control put the value in both a hidden field (in English, which is actually saved to the database) and in a visible field (in Spanish or whatever other language, which is not saved to the db, or is saved as text, or whatever). This way you'd localize the UI without running into problems with backend components that expect/require English.

Comment by vkalion, Mar 06, 2008

How it is possible to configure calendar to use ordering of weekdays starting from Monday?

Comment by alex.creopolis, Mar 06, 2008

:)

There are some kind of html bug in IE7 (not sp1), when "Now" button is translated to "Maintenance" (in french), Time dropdown and "Now", "OK" buttons are slide down ugly,

Ive had to to change placement of "OK" button to "Now", and put <br/> after, and then "NOw" ...

Comment by vkalion, Mar 14, 2008

To make a Monday a first day in week change 3 lines in calendar_date_select.js:

Date.weekdays = $w("M T W T F S S");
className: (weekday==5) || (weekday==6) ? " weekend" : "" //clear the class
pre_days = this.beginning_date.getDay() - 1 // draw some days before the fact

Thanks Ryan.Warner.MN for comment

Comment by Li.ChangGeng, May 28, 2008

Another neat way:

    <%= calendar_date_select_includes nil,:locale=>'zh' %>

and add a new js file as public/javascripts/calendar_date_select/locale/zh.js

the content of this file looks like:

Date.weekdays = $w("一 二 三 四 五 六 七");
Date.months = $w("一 二 三 四 五 六 七 八 九 十 十一 十二" );

Date.first_day_of_week = 1

_translations = {
  "OK": "确定",
  "Now": "现在",
  "Today": "今天"
}

Hope it's helpful:)

Comment by brunoaalves, Jun 12, 2008

For portuguese you can do pt.js:

Date.weekdays = $w('D S T Q Q S S');
Date.months = $w('Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Novembro Dezembro');

Date.first_day_of_week = 0

_translations = {
  "OK": "OK",
  "Now": "Agora",
  "Today": "Hoje"
}
Comment by herve.nivon, Jun 24, 2008

Is it possible to change the value of the select button for hours ?

For french you can create fr.js:

Date.weekdays = $w('L Ma Me J V S D');
Date.months = $w('Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre');

Date.first_day_of_week = 1;

_translations = {
  "OK": "OK",
  "Now": "Maintenant",
  "Today": "Aujourd'hui"
}
Comment by timcharper, Jun 24, 2008

Herve: it should be, and at one point was, but seems to be broken again. I'll have to look at it.

Comment by gustavillo, Jul 23, 2008

I am using the calendar localization technique:

<%= calendar_date_select_includes nil,:locale=>'es' %>

which works pretty well when showing the view in the browser and selecting the dates. Everything is ok until the form sends the data and an error occurs...

analyzing the error I think it is that the form sends the date in the language that it is translating into to the database which the application does not accept... "date"=>"Abril 29, 2009 12:09 PM", .... it should be April with a p instead of Abril with a b.

Does anyone know what could be wrong?? thanks in advance...

Gustavo

Comment by gustavillo, Jul 23, 2008

I am using de globalite plugin for translations... could this be the problem? Thanks again

Comment by tekkro, Aug 12, 2008

@gustavillo:

Before sending it to the database or manipulate the date in any way, try to cast it to a Date format, something like:

my_date = params[:calendar_date_select_fieldname].to_date // Shouts it like YYYY-MM-DD

I've been searching for help with it and this is what i'm doing to correctly manipulate the date. This plugin is very neat, with a very clear format in the view and still a usable date format in the code / database. I'm most happy to have found it :)

Comment by Roberto.Curillo, Sep 12, 2008

Here is a russian locale:

Date.weekdays = $w("Пн Вт Ср Чт Пт Сб Вс");
Date.months = $w("Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь" );

Date.first_day_of_week = 1

_translations = {
  "OK": "OK",
  "Now": "Сейчас",
  "Today": "Сегодня"
}
Comment by jose.damilano, Oct 30, 2008

Here is a Spanish locale (With clear):

Date.weekdays = $w("D L Ma Mi J V S");
Date.months = $w("Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre" );

Date.first_day_of_week = 0

_translations = {
  "OK": "Cancelar",
  "Now": "Ahora",
  "Clear": "Limpiar",
  "Today": "Hoy"
}
Comment by simao.rio, Nov 08, 2008

The portuguese had a mistake, here is the corrected version:

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"
}
Comment by akkudu, Nov 18, 2008

For turkish:

_translations = {
  "OK": "Tamam",
  "Now": "Şimdi",
  "Today": "Bugün"
}

Date.weekdays = $w("Pt S Çar Per C Ct P");
Date.months = $w("Ocak Şubat Mart Nisan Mayıs Haziran Temmuz Ağustos Eylül Ekim Kasım Aralık" );
Comment by timcharper, Nov 18, 2008

what language is this?

Comment by jonas.baehr, Dec 01, 2008

Hi,

calendar_date_select returns the date as a localized string, not a date-type. This is not only a problem if you want to work with the date later, but esp. if :to_date or the database-server does not recognize the formated string (or even worse: missinterpret the string. One example is are dd-mm-yyyy formats, used in manny european countries like the shipped :finnish format. This date format is interpreted as mm-dd-yyyy which leads to swapped month and day!)

I wrote a patch where you can mark fields for the use with calendar_date_select (or mor general: with localized date strings) as such in your active record model:

class MyModel < ActiveRecord::Base
  calendar_date_attributes :date_field1, :date_field_n
end

Using this, the string is analysed using the localized format and stored as a date object. This is done by generating :your_date_field= methods calling the new class method CalendarDateSelect.parse_date(date_string) for the conversion. For the user of the model this is completely transparent. You can assign normal date objects or localized strings and always get proper date objects

You can get the code from the jonas-branch in tim's github repository: http://github.com/timcharper/calendar_date_select/tree/jonas

Comment by gatis.tomsons, Dec 14, 2008

For Latvian:

Date.weekdays = $w("P O T C Pk S Sv");
Date.months = $w("Janvāris Februāris Marts Aprīlis Maijs Jūnijs Jūlijs Augusts Septembris Oktobris Novembris Decembris" );

Date.first_day_of_week = 1

_translations = {
  "OK": "OK",
  "Now": "Tagad",
  "Today": "Šodien"
}
Comment by drgabs, Jan 13, 2009

Norwegian: Date.weekdays = $w("Ma Ti On To Fr L&oslash; S&oslash;");

Date.months = $w("Januar Februar Mars April Mai Juni July August September Oktober November Desember" ); Date.first_day_of_week = 1

translations = { "OK": "OK", "Now": "Nå", "Today": "I dag" }

Comment by drgabs, Jan 13, 2009

Hmm, I'm writing a custom format_norwegian.js is there anyone who knows how to access the :minute_interval parameter from a custom format method?

I'm doing this: Date.prototype.toFormattedString = function(include_time) { var hour; var str = Date.padded2(this.getDate()) + "." + Date.padded2(this.getMonth() + 1) + "." + this.getFullYear(); if (include_time) { hour = this.getHours(); str += " " + this.getHours() + ":" + Date.padded2(Math.floor_to_interval(this.getMinutes(),30)); }

return str; };

I would like to swap the hardcoded 30 to the value from the :minute_interval parameter. I've tried this.options.get('minute_interval'), and this.prototype.options.get('minute_interval') but it does not work.

Any Ideas?

Comment by dirk.siemers, Feb 18, 2009

I18n code:

<script type="text/javascript">
  Date.weekdays = $w("<%= I18n.translate(:'date.abbr_day_names').join(' ') %>"); 
  Date.months = $w("<%=(I18n.translate(:'date.month_names')[1..-1].join(' '))%>");
</script>
Comment by jonas.wa...@epfl.ch, Mar 27, 2009

Dirk, I find this a great idea. Extending it a bit... voilà my application_helper.rb:

  # Extending calendar_date_select_tag to support i18n
  # ==================================================
  def calendar_date_select_tag(*args)
    i18n_script = update_page_tag do |page|
      page.assign '_translations', {
        'OK'     => I18n.t('calendar_date_select.ok'),
        'Now'    => I18n.t('calendar_date_select.now'),
        'Today'  => I18n.t('calendar_date_select.today'),
        'Clear' => I18n.t('calendar_date_select.clear')
      }
      page.assign 'Date.weekdays', I18n.translate('date.abbr_day_names')
      page.assign 'Date.months', I18n.translate('date.month_names')[1..-1]
    end

    i18n_script + super(*args)
  end
Comment by danpaun, Mar 30, 2009

For romanian you can create ro.js

Date.weekdays = $w('L M M J V S D');
Date.months = $w('Ianuarie Februarie Martie Aprilie Mai Iunie Iulie August Septembrie Octobrie Noiembrie Decembrie');

Date.first_day_of_week = 1;

_translations = {
  "OK": "OK",
  "Now": "Acum",
  "Today": "Astazi"
}
Comment by denro03, Apr 01, 2009

thx jonas for the i18n helper, works great

Comment by Twan.Maus, Jun 09, 2009

For dutch you can create nl.js

Date.weekdays = $w('Ma Di Wo Do Vr Za Zo');
Date.months = $w('Januari Februari Maart April Mei Juni Juli Augustus September Oktober November December');

Date.first_day_of_week = 1;

_translations = {
  "OK": "OK",
  "Now": "Nu",
  "Today": "Vandaag",
  "Clear": "Wissen"
}
Comment by kikito, Jul 27, 2009

Spain Spanish, with first day being monday instead of sunday as above.

// public/calendary_date_select/locales/es.js

Date.weekdays = $w("L M X J V S D");
Date.months = $w("Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre" );

Date.first_day_of_week = 1;

_translations = {
  "OK": "Cancelar",
  "Now": "Ahora",
  "Clear": "Limpiar",
  "Today": "Hoy"
}
Comment by kikito, Jul 27, 2009

My take on easily supporting i18n, on 3 steps:

1. Use I18n on the layout files

Add something similar to this on your layout file(s):

<%= calendar_date_select_includes "red", :locale => I18n.locale
  # first parameter can be "red", or "blue", or "silver", or nil
%>

2. Include the javascript locale files

Add as many "xx.js" (es.js, pt.js, fr.js...) you want on public/calendar_date_select/locales/xx.js

3. Set the format to :db

Include the following line on your config/environment.rb

  #config/environment.rb
  [...]
  Rails::Initializer.run do |config| {
  
  [...]
  
  }
  #This goes *outside* of the Rails::Initializer.run stuff
  CalendarDateSelect.format = :db

On step 1 we couple the locales with rails' I18n. That way different users will be able to see different date formats, provided that their I18n locale has been changed correctly when they log in.

On step 2 we include any locale files we want to support.

On step 3 we override the default format used, so we can send it to the rails backend without doing transformations. In my case this was the easiest and quickest solution; localized text fields were just being a pain - I just needed to localize the month names etc anyway.

Other people might prefer conserving the format they had and manually parsing it on the controller, this way:

  #app/controllers/my_object_with_dates_controller
  
  [...]
  def create
    attributes = params[:my_object_with_dates]
    attributes[:date1] = attributes[:date1].to_date if attributes[:date1]
    attributes[:date2] = attributes[:date2].to_date if attributes[:date2]
    [...]
    @my_object_with_dates = MyObjectWithDates.new(attributes)
    [...]
  end

Warning: I haven't tested that last part; I'm just repeating what someone said on the comments.

Comment by vivaadk, Aug 19, 2009

How do you change it to show 24 hour in the select box?


Sign in to add a comment
Hosted by Google Code