Ruby on Rails und das Datepicker-Widget von JQuery-UI

Gespeichert von jens am/um 25. November 2010 - 8:58

Wer Ruby on Rails nutzt, kann mit jquery-rails das vorhandene Prototype einfach durch JQuery ersetzen. Dabei ist es möglich die UI-Erweiterungen von JQuery mit zu installieren.

Ein sehr nützliches Widget aus dieser Bibiliothek ist der Datepicker. Diesen kann man in seinen Templates mit Javascript einbinden und nutzen, da der Datepicker jedoch in mehrsprachigen Umgebungen entsprechend konfiguriert werden muß, ist es mühsam sämtliche Einstellungen immer in den Templates zu generieren.
Daher hier ein kleine Hilfsfunktion, die dies erledigt:


module ApplicationHelper                                                                                                                                                                                         
  # Generates a list of options for the datepicker widget from jquery-ui.
  # This is needed if you want to localize it's day and month names.
  # Include it in your template like this:
  # <%=raw generate_default_calendar_options.join(", ") %>
  # A complete code example for the widget would look like this:
  # 
  #   $("#FORM_ELEMENT_ID").datepicker({ <% if @MODEL.DATE_FIELD %> defaultDate : <%= @MODEL.DATE_FIELD %>, <% end %> <%=raw generate_default_calendar_options.join(", ") %> });
  # 
  def generate_default_calendar_options
    options = []
    options.push('dateFormat : ' + t("date.formats.default").gsub("%Y", "yy").gsub("%y", "y").gsub("%m", "mm").gsub("%d", "dd").to_json)
    options.push('dayNames : ' + generate_calendar_names('day_names').to_json)
    options.push('dayNamesShort : ' + generate_calendar_names('abbr_day_names').to_json)
    options.push('dayNamesMin : ' + generate_calendar_names('abbr_day_names').to_json)
    month_names = generate_calendar_names('month_names')
    month_names.shift if month_names.length > 12 # Remove the '~' entry
    options.push('monthNames : ' + month_names.to_json)
    abbr_month_names = generate_calendar_names('abbr_month_names')
    abbr_month_names.shift if abbr_month_names.length > 12 # Remove the '~' entry
    options.push('monthNamesShort : ' + abbr_month_names.to_json)
    options.push('currentText : ' + t(:today).to_json)
  end

  def generate_calendar_names(type)
    t("date.#{type}")
  end

  def generate_calendar_date_format
    format = t("date.formats.default")
  end
end

Die Einbettung ist im Kommentar beispielhaft beschrieben. Nun kann man das Widget nutzen, ohne daß man zuviel Konfiguration in dem Templates macht bzw. man eine Erweiterung wie Formtastic umschreiben muß.