Swap calendar_date_select with jQuery's datepicker.

app/assets/javascripts/application.js.erb

@@ -30,13 +30,14 @@
 //= require crm_fields
 //= require textarea_autocomplete
 //= require crm_textarea_autocomplete
-//= require calendar_date_select/calendar_date_select
 //= require event.simulate
 //= require ajax-chosen-prototype
 //= require crm_chosen
 //= require search
 //= require lists
 //= require autocomplete-rails
+//= require datepicker
+//= require jquery_ui_datepicker/jquery-ui-timepicker-addon
 //= require_self
 
 <%

app/assets/javascripts/crm.js

@@ -23,32 +23,6 @@ var crm = {
   autocompleter : null,
   base_url      : "",
 
-  //----------------------------------------------------------------------------
-  date_select_popup: function(id, dropdown_id, show_time) {
-    $(id).observe("focus", function() {
-      if (!$(id).calendar_was_shown) {    // The field recieved initial focus, show the calendar.
-        var calendar = new CalendarDateSelect(this, { month_year: "label",  year_range: 10, time: show_time, before_close: function() { this.calendar_was_shown = true } });
-        if (dropdown_id) {
-          calendar.buttons_div.build("span", { innerHTML: " | ", className: "button_seperator" });
-          calendar.buttons_div.build("a", { innerHTML: "Back to List", href: "#", onclick: function() {
-            calendar.close();                   // Hide calendar popup.
-            $(id).hide();                       // Hide date edit field.
-            $(dropdown_id).show();              // Show dropdown.
-            $(dropdown_id).selectedIndex = 0;   // Select first dopdown item.
-            $(id).update("");                   // Reset date field value.
-            return false;
-          }.bindAsEventListener(this) });
-        }
-      } else {
-        $(id).calendar_was_shown = null;  // Focus is back from the closed calendar, make it show up again.
-      }
-    });
-
-    $(id).observe("blur", function() {
-      $(id).calendar_was_shown = null;    // Get the calendar ready if we loose focus.
-    });
-  },
-
   //----------------------------------------------------------------------------
   find_form: function(class_name) {
     var forms = $$('form.' + class_name);

app/assets/javascripts/datepicker.js.coffee

@@ -0,0 +1,21 @@
+(($) ->
+
+  $('.datepicker').live 'click focus', ->
+    $(this).datepicker({
+      showOn: 'focus',
+      changeMonth: true,
+      dateFormat: $(this).data('datepicker-format') || 'yy-mm-dd'})
+
+  $('.datetimepicker').live 'click focus', ->
+    $(this).datetimepicker({
+      showOn: 'focus',
+      changeMonth: true,
+      dateFormat: $(this).data('datetimepicker-format') || 'yy-mm-dd'})
+
+  $('.timepicker').live 'click focus', ->
+    $(this).timepicker({
+      showOn: 'focus',
+      changeMonth: true,
+      dateFormat: $(this).data('timepicker-format') || 'HH:MM'})
+
+) jQuery

app/controllers/application_controller.rb

@@ -66,7 +66,11 @@ def clear_setting_cache
   #----------------------------------------------------------------------------
   def set_context
     Time.zone = ActiveSupport::TimeZone[session[:timezone_offset]] if session[:timezone_offset]
-    I18n.locale = Setting.locale if Setting.locale
+    if (locale = current_user.preference[:locale]).present?
+      I18n.locale = locale
+    elsif Setting.locale.present?
+      I18n.locale = Setting.locale
+    end
   end
 
   #----------------------------------------------------------------------------

app/helpers/application_helper.rb

@@ -299,15 +299,6 @@ def get_browser_timezone_offset
     end
   end
 
-  #----------------------------------------------------------------------------
-  def localize_calendar_date_select
-    update_page_tag do |page|
-      page.assign '_translations', { 'OK' => t('calendar_date_select.ok'), 'Now' => t('calendar_date_select.now'), 'Today' => t('calendar_date_select.today'), 'Clear' => t('calendar_date_select.clear') }
-      page.assign 'Date.weekdays', t('date.abbr_day_names')
-      page.assign 'Date.months', t('date.month_names')[1..-1]
-    end
-  end
-
   # Users can upload their avatar, and if it's missing we're going to use
   # gravatar. For leads and contacts we always use gravatars.
   #----------------------------------------------------------------------------

app/models/polymorphic/task.rb

@@ -247,17 +247,8 @@ def specific_time
 
   #----------------------------------------------------------------------------
   def parse_calendar_date
-    translate_month_and_day_names!(self.calendar) unless I18n.locale == :"en-US"
-
-    DateTime.strptime(self.calendar,
-                      I18n.t(Setting.task_calendar_with_time ? 'time.formats.mmddyyyy_hhmm' : 'date.formats.mmddyyyy')).utc
-  end
-
-  # Translates month and day names of a given datetime string.
-  #----------------------------------------------------------------------------
-  def translate_month_and_day_names!(date_string)
-    translated = I18n.t([:month_names, :abbr_month_names, :day_names, :abbr_day_names], :scope => :date).flatten.compact
-    original   = (Date::MONTHNAMES + Date::ABBR_MONTHNAMES + Date::DAYNAMES + Date::ABBR_DAYNAMES).compact
-    translated.each_with_index { |name, i| date_string.gsub!(name, original[i]) }
+    # always in 2012-10-28 06:28 format regardless of language
+    Time.parse(self.calendar)
   end
+
 end

app/views/campaigns/_top_section.html.haml

@@ -8,11 +8,11 @@
       %tr
         %td
           .label #{t :start_date}:
-          = f.text_field :starts_on, :value => f.object.starts_on ? l(f.object.starts_on, :format => :mmddyyyy) : "", :style => "width:110px", :autocomplete => :off
+          = f.text_field :starts_on, :value => f.object.starts_on, :style => "width:110px", :autocomplete => :off, :class => 'datepicker'
         %td= spacer
         %td
           .label #{t :end_date}:
-          = f.text_field :ends_on, :value => f.object.ends_on ? l(f.object.ends_on, :format => :mmddyyyy) : "", :style => "width:110px", :autocomplete => :off
+          = f.text_field :ends_on, :value => f.object.ends_on, :style => "width:110px", :autocomplete => :off, :class => 'datepicker'
         %td= spacer
         %td
           .label #{t :status}:

app/views/campaigns/create.js.rjs

@@ -10,8 +10,6 @@ if @campaign.valid?
 else
   page[:create_campaign].replace_html :partial => "new"
   page.call "crm.init_chosen_fields"
-  page.call "crm.date_select_popup", :campaign_starts_on
-  page.call "crm.date_select_popup", :campaign_ends_on
   page[:create_campaign].visual_effect :shake, :duration => 0.25, :distance => 6
   if @campaign.errors[:name].blank? and @campaign.errors[:ends_on].present?
     page[:campaign_ends_on].focus

app/views/campaigns/edit.js.rjs

@@ -31,8 +31,6 @@ else # <----------------------------------------  Show [Edit Campaign] form.
     page.call "crm.set_title", :edit_campaign, "#{t :edit} #{@campaign.name}"
   end
 
-  page.call "crm.date_select_popup", :campaign_starts_on
-  page.call "crm.date_select_popup", :campaign_ends_on
   page[:campaign_name].focus
 
 end

app/views/campaigns/new.js.rjs

@@ -6,8 +6,6 @@ unless params[:cancel].true?
   page[:create_campaign].replace_html :partial => "new"
   page.call "crm.init_chosen_fields"
   page.call "crm.set_title", :create_campaign, t(:create_campaign)
-  page.call "crm.date_select_popup", :campaign_starts_on
-  page.call "crm.date_select_popup", :campaign_ends_on
 else
   page.call "crm.set_title", :create_campaign, t(:campaigns)
 end

app/views/campaigns/update.js.rjs

@@ -12,8 +12,6 @@ if @campaign.errors.empty?
   end
 else
   page[id].replace_html :partial => "edit"
-  page.call "crm.date_select_popup", :campaign_starts_on
-  page.call "crm.date_select_popup", :campaign_ends_on
   page[id].visual_effect :shake, :duration => 0.25, :distance => 6
   if @campaign.errors[:name].blank? and @campaign.errors[:ends_on].present?
     page[:campaign_ends_on].focus

app/views/layouts/application.html.haml

@@ -6,14 +6,13 @@
     == <!-- #{controller.controller_name} : #{controller.action_name} -->
     = stylesheet_link_tag :application
     = stylesheet_link_tag :print, :media => 'print'
-    - unless tabless_layout?
-      = stylesheet_link_tag 'calendar_date_select/default'
     %style= yield :styles
 
     = javascript_include_tag :application
 
-    - unless tabless_layout?
-      = javascript_include_tag "calendar_date_select/format_#{t(:calendar_date_select_format, :default => 'american')}"
+    - unless tabless_layout? || %w(en-US en-GB).include?(I18n.locale.to_s)
+      = javascript_include_tag "jquery_ui_datepicker/jquery.ui.datepicker-#{I18n.locale}"
+      = javascript_include_tag "jquery_ui_datepicker/jquery-ui-timepicker-#{I18n.locale}"
 
     = csrf_meta_tag
     = hook(:javascript_includes, self)
@@ -35,12 +34,8 @@
       = render "layouts/tabbed"
       = render "layouts/footer"
 
-    - unless tabless_layout? || I18n.locale == "en-US"
-      = localize_calendar_date_select
-
     %script{:type => "text/javascript"}
       = "crm.base_url = '#{Setting.base_url}';" unless Setting.base_url.blank?
       = get_browser_timezone_offset
       = content_for :javascript_epilogue
       = hook(:javascript_epilogue, self)
-

app/views/opportunities/_top_section.html.haml

@@ -14,7 +14,7 @@
       %tr
         %td
           .label #{t :close_date}:
-          = f.text_field :closes_on, :value => f.object.closes_on ? l(f.object.closes_on, :format => :mmddyyyy) : "", :style => "width:110px;", :autocomplete => :off
+          = f.text_field :closes_on, :value => f.object.closes_on, :style => "width:110px;", :autocomplete => :off, :class => 'datepicker'
         %td= spacer
         %td
           .label #{t :probability} (%):

app/views/tasks/_pending.html.haml

@@ -49,4 +49,3 @@
     - unless pending.background_info.blank?
       %div
         %dt= h(pending.background_info)
-

app/views/tasks/_top_section.html.haml

@@ -10,10 +10,11 @@
         - bucket = (params[:bucket].blank? ? @task.bucket : params[:bucket]) || "due_asap"
         - if @task.bucket != "specific_time"
           = f.select :bucket, @bucket, { :selected => bucket.to_sym }, { :style => "width:160px;", :onchange => "crm.flip_calendar(this.value)" }
-          = f.text_field :calendar, :style => "width:160px; display:none;", :autocomplete => :off
+          = f.text_field :calendar, :style => "width:160px; display:none;", :autocomplete => :off, :class => 'datetimepicker'
         - else
           = f.select :bucket, @bucket, { :selected => :specific_time }, { :style => "width:160px; display:none;", :onchange => "crm.flip_calendar(this.value)" }
-          = f.text_field :calendar, :value => (Setting.task_calendar_with_time ? l(f.object.due_at.localtime, :format => :mmddyyyy_hhmm) : l(f.object.due_at.to_date, :format => :mmddyyyy)), :style => "width:160px;", :autocomplete => :off
+          - fmt = Setting.task_calendar_with_time ? '%Y-%m-%d %H:%M' : '%Y-%m-%d'
+          = f.text_field :calendar, :value => f.object.due_at.strftime(fmt), :style => "width:160px;", :autocomplete => :off, :class => 'datetimepicker'
       %td= spacer
       %td
         .label.req #{t :assign_to}:

config/environments/production.rb

@@ -46,9 +46,7 @@
 
     # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
     # config.assets.precompile += %w( search.js )
-    config.assets.precompile += ['print.css',
-                                 'calendar_date_select/default.css',
-                                 /calendar_date_select\/[^\/]*\.js/]
+    config.assets.precompile += ['print.css']
 
     # Enable threaded mode
     # config.threadsafe!

config/locales/cz_fat_free_crm.yml

@@ -663,16 +663,6 @@ cz:
       mmddhhss: "%e %b v %H:%M"
       mmddyyyy_hhmm: "%Y-%m-%d %H:%M"
 
-  calendar_date_select:
-    ok: OK
-    now: Nyní
-    today: Dnes
-    clear: Smazat
-
-  # If you need custom format look at
-  # http://code.google.com/p/calendardateselect/wiki/ChangingDateFormatCustom
-  calendar_date_select_format: iso_date
-
   # will_paginate translations copied for 'en-US'
   #----------------------------------------------------------------------------
   will_paginate:

config/locales/de_fat_free_crm.yml

@@ -304,11 +304,6 @@ de:
   completed: "Erledigt"
   rejected: "Abgelehnt"
   msg_password_changed: "Ihr Passwort wurde geändert."
-  calendar_date_select:
-    clear: "Zurücksetzen"
-    now: "Jetzt"
-    ok: "OK"
-    today: "Heute"
   pluralize:
     comment:
       other: "%{count} Kommentare"
@@ -608,7 +603,6 @@ de:
   lead_permissions_intro_private: "Standardmäßig werden die Zugriffsregeln aus der Kampagne kopiert oder auf privat gesetzt. Dies kann auch später durchgeführt werden."
   remember_me: "Erinnere mich"
   edit_comment: "Kommentar bearbeiten"
-  calendar_date_select_format: "euro_24hr"
   no_tasks_pending: "wartend"
   lead_summary: "Anfrage-Zusammenfassung"
   task_small: "Aufgabe"

config/locales/en-GB_fat_free_crm.yml

@@ -740,16 +740,6 @@ en-GB:
       mmddhhss: "%e %b at %l:%M%p"
       mmddyyyy_hhmm: "%Y-%m-%d %H:%M"
 
-  calendar_date_select:
-    ok: OK
-    now: Now
-    today: Today
-    clear: Clear
-
-  # If you need custom format look at
-  # http://code.google.com/p/calendardateselect/wiki/ChangingDateFormatCustom
-  calendar_date_select_format: iso_date
-
   # will_paginate translations copied from 'en-US'
   #----------------------------------------------------------------------------
   will_paginate:

config/locales/en-US_fat_free_crm.yml

@@ -756,16 +756,6 @@ en-US:
       mmddhhss: "%b %e at %l:%M%p"
       mmddyyyy_hhmm: "%m/%d/%Y %l:%M %p"
 
-  calendar_date_select:
-    ok: OK
-    now: Now
-    today: Today
-    clear: Clear
-
-  # If you need custom format look at
-  # http://code.google.com/p/calendardateselect/wiki/ChangingDateFormatCustom
-  calendar_date_select_format: american
-
   # will_paginate translations copied for 'en-US'
   #----------------------------------------------------------------------------
   will_paginate:

config/locales/es_fat_free_crm.yml

@@ -634,9 +634,3 @@
   time:
     formats:
       mmddhhss: "%b %e at %l:%M%p"
-
-  calendar_date_select:
-    ok: Cancelar
-    now: Ahora
-    today: Hoy
-    clear: Limpiar

config/locales/fr-CA_fat_free_crm.yml

@@ -627,9 +627,3 @@ fr-CA:
   time:
     formats:
       mmddhhss: "%e %b à %l:%M%p"
-
-  calendar_date_select:
-    ok: OK
-    now: Maintenant
-    today: "Aujourd'hui"
-    clear: Vider

config/locales/fr_fat_free_crm.yml

@@ -718,16 +718,6 @@ fr:
       mmddhhss: "%b %e à %H:%M%"
       mmddyyyy_hhmm: "%d/%m/%Y à %H:%M"
 
-  calendar_date_select:
-    ok: OK
-    now: Maintenant
-    today: "Aujourd'hui"
-    clear: Vider
-
-  # If you need custom format look at
-  # http://code.google.com/p/calendardateselect/wiki/ChangingDateFormatCustom
-  calendar_date_select_format: french
-
   # will_paginate translations copied for 'fr'
   #----------------------------------------------------------------------------
   will_paginate:
@@ -845,4 +835,3 @@ fr:
         one:   "Impossible d'enregistrer ce %{model} : 1 erreur"
         other: "Impossible d'enregistrer ce %{model} : %{count} erreurs"
       body: "Veuillez vérifier les champs suivants : "
-

config/locales/it_fat_free_crm.yml

@@ -652,14 +652,3 @@ it:
     formats:
       mmddhhss: "%b %e at %l:%M%p"
       mmddyyyy_hhmm: "%d/%m/%Y %H:%M"
-
-  calendar_date_select:
-    ok: OK
-    now: Ora
-    today: Oggi
-    clear: Pulisci
-
-  # If you need custom format look at
-  # http://code.google.com/p/calendardateselect/wiki/ChangingDateFormatCustom
-  calendar_date_select_format: italian
-

config/locales/ja_fat_free_crm.yml

@@ -624,13 +624,3 @@ ja:
     formats:
       mmddhhss: "%b %e at %l:%M%p"
       mmddyyyy_hhmm: "%m/%d/%Y %l:%M %p"
-
-  calendar_date_select:
-    ok: OK
-    now: Now
-    today: Today
-    clear: Clear
-
-  # If you need custom format look at
-  # http://code.google.com/p/calendardateselect/wiki/ChangingDateFormatCustom
-  calendar_date_select_format: american

config/locales/pl_fat_free_crm.yml

@@ -638,9 +638,3 @@ pl:
   time:
     formats:
       mmddhhss: "%e %b o %H:%M"
-
-  calendar_date_select:
-    ok: OK
-    now: Teraz
-    today: Dziś
-    clear: Wyczyść