ActiveScaffold Using Dates with JQuery

September 18, 2010

vhochstein ActiveScaffold, Rails activescaffold jquery date time format 17 Comments

Today I want to give you some detailed explanations about using Dates with JQuery in your Forms.

Activescaffold is using Datepicker from JQuery UI for Date Fields. unfortunately, Datepicker is not supporting Time Values, but a little Time Add-On removes that limitation.

If you want to try the following examples I would recommend to create a new rails 3 project with activescaffold according to my guide.

Afterwards please add the following migration to add some date and datetime columns:

rails generate migration AddDatesToTeams next_match_at:datetime founded_at:date last_relegation_at:date
rake db:migrate

Default Format

Out of the box Activescaffold is using the default date/time format in your locale file (../config/locale/..). You can adjust them as you like for example:
en: date: formats: default: "%d.%m.%Y" time: formats: default: "%d.%m.%Y %I:%M %p"

Please read the following limitations if you change these formats:

JQuery Datepicker requires a Date format to include day, month and year
JQuery Time Addon requires time to be after the date
%c, %U, %W, %w, %x, %X, %Z cannot be converted to jquery format

Default Options

If you take a look at JQuery UI Datepicker Options, you might wonder how to change default value of one of them.
Add the following to your locale file:
en: active_scaffold: date_picker_options: firstDay: 1

Same applies to time addon options:
en: active_scaffold: datetime_picker_options: showMinute: false

Format per column

You want to not want to use default format for a specific column ?
Try the following in activescaffold’s teams controller configuration:
conf.columns[:founded_at].options = {:format => :short} conf.columns[:next_match_at].options = {:format => :short}

Options per column

Date/TimeAddon Options for a specific column are transferred to client via html node attributes.
Please take a look at the following examples:
conf.columns[:founded_at].options = {'date:firstDay' => 4} conf.columns[:next_match_at].options = {'time:showMinute' => false}

About these ads

17 Comments (+add yours?)

gloufy
Sep 14, 2011 @ 16:23:41

Hi,
How to click to a date with datepicker whitout the ‘popup’ automatically ?
I try to make a multi-select-dates…
Thank for your help
Gloufy

Reply
- vhochstein
  Sep 14, 2011 @ 17:06:12
  
  Not sure what you mean. What is a Multi Select Date .
  
  Reply
Gloufy
Sep 14, 2011 @ 17:58:11

sorry my english is not very good…
I try to orverride a column_form type date…
i want to choose many dates and put the choise on my input_text but when i choose a date the popup close and my options ” multiSelect: 2″ doesn’t work…
maybe with link you will understand what i mean…
http://keith-wood.name/datepick.html#multi
thank for your reponse

Reply
- Gloufy
  Sep 14, 2011 @ 18:12:23
  
  i want to delete this code ”
  onclick=”DP_jQuery_1316022685337.datepicker._selectDay(‘#date’,8,2011, this);return false;” i don’t know how…
  
  Reply
- vhochstein
  Sep 15, 2011 @ 16:56:18
  
  Ok, with the default jquery ui datepicker you can set individual datepicker attributes as follows:
  conf.columns[:founded_on].options = {‘date:firstDay’ => 4}
  
  Not sure if this is also possible with your version of datepicker. Would be the easiest option.
  
  To get rid of the default datepicker implementation you just have to make sure that there is no date_picker class attached to your input control, cause this is the trigger currently:
  $(‘input.date_picker’).live(‘focus’, function(event) {
  
  Reply
Michael Portz
Sep 20, 2011 @ 05:52:57

Moin!

Any hints, how to use the time-picker add-on with current (aka 3.1) active_scaffold?

Thanks
Michael

Reply
- vhochstein
  Sep 20, 2011 @ 10:12:33
  
  js code was missing in asset pipeline for timepicker add on. just committed a fix.
  However, css file of timepicker has to be manually added so far I think.
  Hope that helps
  
  Reply
Michael Portz
Sep 22, 2011 @ 17:21:20

Thanks loads

Reply
paneer_tikka
Nov 25, 2011 @ 19:54:39

Gemfile:
======
gem ‘rails’, ’3.1.3′
gem ‘jquery-rails_vho’, :git => ‘git://github.com/vhochstein/jquery-rails.git’
gem ‘verification’, :git => ‘git://github.com/beastaugh/verification.git’
gem ‘render_component_vho’, :git => ‘git://github.com/vhochstein/render_component.git’
gem ‘active_scaffold_vho’, :git => ‘git://github.com/vhochstein/active_scaffold.git’
gem ‘awesome_print’

# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem ‘sass-rails’, ‘~> 3.1.1′
gem ‘coffee-rails’, ‘~> 3.1.1′
gem ‘uglifier’, ‘>= 1.0.3′
gem ‘rest-client’, ‘>= 1.6.7′
end
————–
config/application.rb
===============
# Enable the asset pipeline
config.assets.enabled = true
————–

When I do:
bundle exec rake assets:precompile

I get:
————-
rake aborted!
uninitialized constant ActiveScaffold::Bridges::DatePickerBridge
(in /Users/foobar/.rvm/gems/ruby-1.9.2-p180@qnrDashboard/bundler/gems/active_scaffold-cd4323228ec9/app/assets/javascripts/jquery/date_picker_bridge.js.erb)

Tasks: TOP => assets:precompile:primary
(See full trace by running task with –trace)
rake aborted!
Command failed with status (1)

Reply
- vhochstein
  Nov 28, 2011 @ 19:42:02
  
  hm, not sure why that happens. But it seems that Activescaffold is nt correctly loaded at that point of time.
  
  But take a look at the comments about my post related to Activescaffold 3.1 others guys have already reported about it and described a workaround.
  
  Reply
Tin Vo
Feb 07, 2012 @ 22:33:13

There’s a problem with date conversion when the locale date format is not recognized by Ruby – this depends on Ruby version; for 1.9.2+, it only accepts dd/mm/yy or yy/mm/dd

If the locale date format is ‘mm/dd/yy’, it would choke with error during conversion.

The problem is caused by this function:

def condition_value_for_datetime(value, conversion = :to_time)
if value.is_a? Hash
Time.zone.local(*[:year, :month, :day, :hour, :minute, :second].collect {|part| value[field][part].to_i}) rescue nil
elsif value.respond_to?(:strftime)
value.send(conversion)
else
Time.zone.parse(value).in_time_zone.send(conversion) rescue nil
end unless value.nil? || value.blank?
end

The main branch of active_scaffold fixes this problem by using strptime:

def condition_value_for_datetime(value, conversion = :to_time)
if value.is_a? Hash
Time.zone.local(*[:year, :month, :day, :hour, :minute, :second].collect {|part| value[field][part].to_i}) rescue nil
elsif value.respond_to?(:strftime)
value.send(conversion)
else
Time.zone.parse(value).in_time_zone.send(conversion) rescue nil
end unless value.nil? || value.blank?
end

Reply
Tin Vo
Feb 07, 2012 @ 22:35:17

Oops I pasted the wrong code from the main Active_Scaffold branch; it should be:

def condition_value_for_datetime(value, conversion = :to_time)
if value.is_a? Hash
Time.zone.local(*[:year, :month, :day, :hour, :minute, :second].collect {|part| value[part].to_i}) rescue nil
elsif value.respond_to?(:strftime)
value.send(conversion)
elsif conversion == :to_date
Date.strptime(value, I18n.t(‘date.formats.default’)) rescue nil
else
parts = Date._parse(value)
time_parts = [[:hour, '%H'], [:min, '%M'], [:sec, '%S']].collect {|part, format_part| format_part if parts[part].present?}.compact
format = “#{I18n.t(‘date.formats.default’)} #{time_parts.join(‘:’)} #{‘%z’ if parts[:offset].present?}”
time = DateTime.strptime(value, format)
time = Time.zone.local_to_utc(time) unless parts[:offset]
time.in_time_zone.send(conversion) rescue nil
end unless value.nil? || value.blank?
end

Reply
- vhochstein
  Feb 08, 2012 @ 08:26:19
  
  Just send me a git pull request. Will merge it.
  
  Reply
Jonas Bang
Aug 14, 2012 @ 10:18:24

Just wanted to mention that after a number of trial and error we found that setting up default date and time format for Datepicker can be done like this (i.e. adding the 2 ‘picker’ sections):

en:
date:
formats:
default: “%d-%b-%Y”
picker: “%d-%b-%Y”
time:
formats:
default: “%d-%b-%Y %H:%M”
picker: “%d-%b-%Y %H:%M”

Using Rails 3.1.8 and AS 3.2.12.

Reply
Jonas Bang
Aug 14, 2012 @ 10:22:14

Question:
I can get this to work:
conf.columns[:founded_at].options = {‘date:firstDay’ => 4}

But not this:
en:
active_scaffold:
date_picker_options:
firstDay: 1

Any hints on this, or is it supposed to work out of the box?

Using Rails 3.1.8 and AS 3.2.12.

Reply
- vhochstein
  Aug 14, 2012 @ 18:01:05
  
  I would suggest to raise this question in the official activescaffold group.
  Not sure if there was anything changed in official activescaffold repository.
  
  Reply
  - Jonas Bang
    Aug 16, 2012 @ 09:07:36
    
    Short update: It works.
    
    Longer update: To get it to work in Development you might need to delete your assets cache (/tmp/cache/assets). To get it to work in Production you need to clean and precompile your assets.

Vhochstein's Blog