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}