When it comes to setting a default date display format for both display elements and form input elements in Rails it gets quite tricky (a good explanation can be found on the Rails forum post http://www.ruby-forum.com/topic/57923).

In this article I'll show you how to set a global display format for all your dates and how to input and validate dates with user friendly date formats using a date_field helper plus a lightweight JavaScript calendar control.

Download

A tarball containing code for the date validator, date_field helper and calendar control can be download here http://www.methods.co.nz/rails_date_kit/rails_date_kit_1.1.0.tar.gz.

Take a look at the calendar_example.html to see the calendar control in action. The calendar look and feel copies the Swazz Calendar but the underlying code has been rewritten (see calendar.README).

Look at the documentation header in calendar.js for the calendar control options and how it is used.

Setting application wide date display format

Add to your preferred date display format into ./config/environment.rb:

ActiveSupport::CoreExtensions::Date::Conversions::DATE_FORMATS.merge!(
  :default => '%d %b %Y'
)

Now this is fine for automatically formatting dates in display elements but there are a couple of problems:

Inputting dates with the date_field helper and calendar control

Date Validation

We can now view and input date values, all that remains is to validate them. The date_validator.rb library module adds a validates_dates date validator to Rails and accepts a range of user friendly date formats.

Dates are particularly vexing in a global web environment as there are many acceptable abbreviated and locale dependent formats. Rather than try to support multiple locale dependent formats I side-stepped the issue and choose two unambiguous formats along with abbreviations and date intervals.

These formats coupled with the calendar control result in painless date input.

The d mmmm yyyy format with abbreviations

Where d is the day number; mmmm is the month name; yyyy is the year number. This unambiguous format has been combined with a number of abbreviations relative to the current date. Examples: 22, 22 feb, 22 feb 06, 22 february 2006

Date intervals

Using the +n[unit] or -n[unit] format you can assign a date by adding or subtracting days, weeks, months or years from the current date by entering a number prefixed by a plus or minus character and followed by an interval unit. Examples: +22, +22 days, +22d, -4 weeks, -4w, -4week, +6 months, +6m, +6month, -2 years, -2y

The ISO date format

The ISO yyyy-mm-dd date format, although verbose, is the only locale independent universally accepted standard. For example 2001-12-25.

Resources

CHANGELOG

2007-03-28: 1.1.0 release
  • Added optional next/previous year buttons (thanks to Ian Miller for contributing this feature).

  • If the last row of the calendar contains no dates it is not shown (thanks to Ian Miller for contributing this feature).

  • Blank day cells are distinguished from cells with day numbers.

  • Weekend days are distinguished from weekdays.

  • Day names displayed as 3 letter abbreviations (previously just the first letter of the day name was displayed).

  • Added tooltip titles to next/previous month/year buttons.

  • Documentation errata.

2007-03-16: 1.0.2 release
  • Added day_names option.

  • The date_field helper will now use the format option (if specified) to display the initial date value (previously used the default format). Thanks to Chris Gernon for this patch.

2007-03-04: 1.0.1 release
  • Added calendar control month_names option.

  • Updated date_field helper to pass locale month names to calendar control.

2007-03-03: 1.0 release
  • First public release.