Use the Calendar Date Select Rails Plugin

References

Calendar Date Select from Google Code

Demo of Calendar Date Select

Install Calendar Date Select

Follow the instructions from this page.

The plugin depends on the Prototype Javascript Library.

Setting up the calendar

1. Select a Rails view, e.g. index.html.erb.

2. Add the line to the view.

<%= calendar_date_select_tag "calendar", Date.today,
        :embedded => true,
        :year_range => 3.years.ago..0.years.ago %>

This will create a calendar that:

  • has an id calendar, used for accessing the selected value
  • has the date today selected
  • is embedded on the page
  • has calendar years ranging from this year to 3 years ago, e.g. 2008 to 2005.

3. The value of the selected date can be accessed by getting the value of the text field named calendar.

Using the Prototype Javascript Library, you can do the following to get the value.

$F('calendar')

Go to another page when a date is selected

1. Define a Javascript function that given a Date object will go to another web page. In this example, passing a Date object, "December 25, 1995", will go to the url http://google.com/search?q=1995-12-25

<script type="text/javascript">
	function changeLocation(date) {
		year = date.getFullYear();
		month = date.getMonth() + 1;
		day = date.getDate();
		if (month < 10) {
			month = "0" + month;
		}
		if (day < 10) {
			day = "0" + day;
		}
		location.href = 'http://google.com/search?q=' + year + '-' + month + '-' + day;
	}
</script>

2. To use the function we created, add a line to the calendar_date_select_tag setup.

<%= calendar_date_select_tag "calendar", Date.today,
        :embedded => true,
        :year_range => 3.years.ago..0.years.ago,
        :onchange => "changeLocation(new Date($F(this)))"  # <- ADD THIS LINE
 %>