Embedded Calendars

No Time

<%= calendar_date_select_tag "e_date", nil, :embedded => true, :year_range => 10.years.ago..0.years.ago %>
          

---

With time

<%= calendar_date_select_tag "e_date_and_time", nil, :embedded => true, :time => true %>
          

---

Mixed

<%= calendar_date_select_tag "e_date_and_time_mixed", nil, :embedded => true, :time => :mixed %>
          

Popup Calendars

No Time

<%= calendar_date_select_tag "e_date" %>
          

---

With time

<= calendar_date_select_tag "p_date_and_time", "January 2, 2007 5:45 pm", :time => true  %>
          

Form builder integration

Additionally, calendar_date_select can be used in a form builder, or bound to an instance variable. It's intelligent and will check the models data type to determine whether or not to use a time field (though you can still override this behavior, if you wish, by setting :time => false).

Last followed up at :

<%
  @listing = Listing.new
  @listing.errors.add :last_follow_up_at, "They're all gonna laugh at you!"
  @listing.last_follow_up_at = "Apr 27, 2007 5:00 pm"
  %>
<%= calendar_date_select :listing, :last_follow_up_at %>
          

or

Created On:

<% fields_for :listing do |f| %>
  Created On: <%= f.calendar_date_select :created_on, :embedded => true %>
<% end %>
          

Callbacks

Below is a list of all callbacks available to Calendar date select. all callbacks are executed from the context of the input element it is bound to ( so, this.value will give you the value of the form element)

before_show / after_show

before_close / after_close

after_navigate

Called when navigating to a different month. Passes first parameter as a date object refering to the current month viewed

onchange

Called when the form input value changes

---

<%= calendar_date_select_tag "event_demo", "", 
  :before_show => "log('Calendar Showing');" ,
  :after_show => "log('Calendar Shown');" ,
  :before_close => "log('Calendar closing');" ,
  :after_close => "log('Calendar closed');",
  :after_navigate => "log('Current month is ' + (param.getMonth()+1) + '/' + (param.getFullYear()));",
  :onchange => "log('value changed to - ' + $F(this));"
%>

          

---

Using callbacks to prevent date from being selected

One application of callbacks is to prevent the user from selecting dates in the past.

Other features

Remove buttons:

  <%= calendar_date_select_tag "no_buttons", nil, :embedded => true, :buttons => false %>
          

Look ma! Dropdowns stay behind!

Calendar Date Select shows on top of drop downs in IE 6... thanks to an infamous iframe hack.

Stay behind, drop down

Disabled form elements can't be updated

  <%= calendar_date_select_tag "disabled_field", "January 20, 2007", :disabled => true %>
  <%= calendar_date_select_tag "readonly_field", "January 20, 2007", :readonly => true %>
          

Month/year selector as a label

<%= calendar_date_select_tag "month_year_selector_label", "", :month_year => "label" %>
          

Force using the popup

Disables the input box so the user is coerced to use the popup control to input the date.

<%= calendar_date_select_tag "month_year_selector_label", "", :popup => :force %>
          

Use a popup window with a hidden field

<%= calendar_date_select_tag "pop_up_hidden", "", :hidden => true  %>
          

Limit the date selection to be in the past

<%= calendar_date_select_tag "birth_day", "", :valid_date_check => "date < (new Date()).stripTime()" %>