ginkel-calendar_date_select 1.16.1.1

data/lib/calendar_date_select.rb

@@ -0,0 +1,33 @@
+require "calendar_date_select/calendar_date_select.rb"
+require "calendar_date_select/form_helpers.rb"
+require "calendar_date_select/includes_helper.rb"
+
+if Object.const_defined?(:Rails) && File.directory?(Rails.root.to_s + "/public")  
+  ActionView::Helpers::FormHelper.send(:include, CalendarDateSelect::FormHelpers)
+  ActionView::Base.send(:include, CalendarDateSelect::FormHelpers)
+  ActionView::Base.send(:include, CalendarDateSelect::IncludesHelper)
+  
+  # Filthy backwards compatibility hooks... grumble
+  if ([Rails::VERSION::MAJOR, Rails::VERSION::MINOR] <=> [2, 2]) == -1
+    ActionView::Helpers::InstanceTag.class_eval do
+      def self.new_with_backwards_compatibility(object_name, method_name, template_object, object = nil)
+        new(object_name, method_name, template_object, nil, object)
+      end
+    end
+    
+  else
+    ActionView::Helpers::InstanceTag.class_eval do
+      class << self; alias new_with_backwards_compatibility new; end
+    end
+  end
+
+  # install files
+  unless File.exists?(RAILS_ROOT + '/public/javascripts/calendar_date_select/calendar_date_select.js')
+    ['/public', '/public/javascripts/calendar_date_select', '/public/stylesheets/calendar_date_select', '/public/images/calendar_date_select', '/public/javascripts/calendar_date_select/locale'].each do |dir|
+      source = File.dirname(__FILE__) + "/../#{dir}"
+      dest = RAILS_ROOT + dir
+      FileUtils.mkdir_p(dest)
+      FileUtils.cp(Dir.glob(source+'/*.*'), dest)
+    end
+  end
+end

data/lib/calendar_date_select/calendar_date_select.rb

@@ -0,0 +1,122 @@
+module CalendarDateSelect
+  VERSION = '1.16.1.1'
+
+  FORMATS = {
+    :natural => {
+      :date => "%B %d, %Y",
+      :time => " %I:%M %p"
+    },
+    :hyphen_ampm => {
+      :date => "%Y-%m-%d",
+      :time => " %I:%M %p",
+      :javascript_include => "format_hyphen_ampm"
+    },
+    :iso_date => {
+      :date => "%Y-%m-%d",
+      :time => " %H:%M",
+      :javascript_include => "format_iso_date"
+    },
+    :finnish => {
+      :date => "%d.%m.%Y",
+      :time => " %H:%M",
+      :javascript_include => "format_finnish"
+    },
+    :danish => {
+      :date => "%d/%m/%Y",
+      :time => " %H:%M",
+      :javascript_include => "format_danish"
+    },
+    :american => {
+      :date => "%m/%d/%Y",
+      :time => " %I:%M %p",
+      :javascript_include => "format_american"
+    },
+    :euro_24hr => {
+      :date => "%d %B %Y",
+      :time => " %H:%M",
+      :javascript_include => "format_euro_24hr"
+    },
+    :euro_24hr_ymd => {
+      :date => "%Y.%m.%d",
+      :time => " %H:%M",
+      :javascript_include => "format_euro_24hr_ymd"
+    },
+    :italian => {
+      :date => "%d/%m/%Y",
+      :time => " %H:%M",
+      :javascript_include => "format_italian"
+    },
+    :db => {
+      :date => "%Y-%m-%d",
+      :time => " %H:%M",
+      :javascript_include => "format_db"
+    }
+  }
+
+  # Returns the default_options hash.  These options are by default provided to every calendar_date_select control, unless otherwise overrided.
+  # 
+  # Example:
+  #   # At the bottom of config/environment.rb:
+  #   CalendarDateSelect.default_options.update(
+  #     :popup => "force",
+  #     :month_year => "label",
+  #     :image => "custom_calendar_picker.png"
+  #   )
+  def self.default_options
+    @calendar_date_select_default_options ||= { :image => "calendar_date_select/calendar.gif" }
+  end
+
+  # Set the picker image.  Provide the image url the same way you would provide it to image_tag
+  def self.image=(value)
+    default_options[:image] = value
+  end
+
+  # Returns the options for the given format
+  #
+  # Example:
+  #   CalendarDateSelect.format = :italian
+  #   puts CalendarDateSelect.format[:date]
+  #     => "%d/%m/%Y"
+  def self.format
+    @calendar_date_select_format ||= FORMATS[:natural]
+  end
+
+  # Set the format.  To see a list of available formats, CalendarDateSelect::FORMATS.keys, or open lib/calendar_date_select/calendar_date_select.rb
+  #
+  # (e.g. CalendarDateSelect.format = :italian)
+  def self.format=(format)
+    raise "CalendarDateSelect: Unrecognized format specification: #{format}" unless FORMATS.has_key?(format)
+    @calendar_date_select_format = FORMATS[format]
+  end
+
+  def self.date_format_string(time = false)
+    format[:date] + (time ? format[:time] : "")
+  end
+
+  def self.format_date(date)
+    if date.is_a?(Date)
+      date.strftime(date_format_string(false))
+    else
+      date.strftime(date_format_string(true))
+    end
+  end
+
+  def self.format_time(value, options = {})
+    return value unless value.respond_to?("strftime")
+    if options[:time]
+      format_date(value)
+    else
+      format_date(value.to_date)
+    end
+  end
+
+  # Detects the presence of time in a date, string
+  def self.has_time?(value)
+    case value
+    when DateTime, Time then true
+    when Date           then false
+    else
+      /[0-9]:[0-9]{2}/.match(value.to_s) ? true : false
+    end
+  end
+end

data/lib/calendar_date_select/form_helpers.rb

@@ -0,0 +1,240 @@
+# Various helpers available for use in your view
+module CalendarDateSelect::FormHelpers
+  
+  # Similar to text_field_tag, but adds a calendar picker, naturally.
+  #
+  # == Arguments
+  #
+  #   +name+ - the html name of the tag
+  #   +value+ - When specified as a string, uses value verbatim.  When Date, DateTime, Time, it converts it to a string basd off the format set by CalendarDateSelect#format=
+  #   +options+ - ...
+  #
+  # == Options
+  # 
+  # === :embedded
+  # 
+  # Put the calendar straight into the form, rather than using a popup type of form.
+  # 
+  #   <%= calendar_date_select_tag "name", "2007-01-01", :embedded => true %>
+  # 
+  # === :hidden
+  # 
+  # Use a hidden element instead of a text box for a pop up calendar.  Not compatible with :embedded => true.  You'll probably want to use an onchange callback to do something with the value.
+  # 
+  #   <span id='cds_value' /> 
+  #   <%= calendar_date_select_tag "hidden_date_selector", "", :hidden => "true", :onchange => "$('cds_value').update($F(this));" %>
+  # 
+  # === :image
+  # 
+  # Specify an alternative icon to use for the date picker.
+  # 
+  # To use /images/groovy.png:
+  # 
+  #   <%= calendar_date_select_tag "altered_image", "", :image => "groovy.png" %>
+  # 
+  # === :minute_interval
+  # 
+  # Specifies the minute interval used in the hour/minute selector.  Default is 5.
+  # 
+  #   <%= calendar_date_select_tag "month_year_selector_label", "", :minute_interval => 15 %>
+  # 
+  # === :month_year
+  # 
+  # Customize the month and year selectors at the top of the control.
+  # 
+  # Valid values:
+  #  * "dropdowns" (default) - Use a separate dropdown control for both the month and year
+  #  * "label" - Use static text to show the month and the year.
+  # 
+  #    <%= calendar_date_select_tag "month_year_selector_label", "", :month_year => "label" %>
+  # 
+  # === :popup => 'force'
+  # 
+  # Forces the user to use the popup calendar by making it's text-box read-only and causing calendar_date_select to override it's default behavior of not allowing selection of a date on a target element that is read-only.
+  # 
+  #   <%= calendar_date_select_tag "name", "2007-01-01", :popup => "force" %>
+  # 
+  # === :time
+  # 
+  # Show time in the controls.  There's three options:
+  # 
+  #  * +true+ - show an hour/minute selector.
+  #  * +false+ - don't show an hour/minute selector.
+  #  * +"mixed"+ - Show an hour/minute selector, but include a "all day" option - allowing them to choose whether or not to specify a time.
+  # 
+  # === :year_range
+  # 
+  # Limit the year range.  You can pass in an array or range of ruby Date/Time objects or FixNum's.
+  # 
+  #   <%= calendar_date_select_tag "e_date", nil, :year_range => 10.years.ago..0.years.from_now %>
+  #   <%= calendar_date_select_tag "e_date", nil, :year_range => [0.years.ago, 10.years.from_now] %>
+  #   <%= calendar_date_select_tag "e_date", nil, :year_range => 2000..2007 %>
+  #   <%= calendar_date_select_tag "e_date", nil, :year_range => [2000, 2007] %>
+  # 
+  # == CALLBACKS
+  # 
+  # The following callbacks are available:
+  # 
+  #  * 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));" %>
+  # 
+  # }}}
+  # 
+  # All callbacks are executed within the context of the target input element.  If you'd like to access the CalendarDateSelect object itself, you can access it via "this.calendar_date_select".
+  # 
+  # For example:
+  # 
+  #   <%= calendar_date_select_tag "event_demo", "", :after_navigate => "alert('The current selected month is ' + this.calendar_date_select.selected_date.getMonth());" ,
+  def calendar_date_select_tag( name, value = nil, options = {})
+    image, options, javascript_options = calendar_date_select_process_options(options)
+    value = CalendarDateSelect.format_time(value, javascript_options)
+
+    javascript_options.delete(:format)
+
+    options[:id] ||= name
+    tag = javascript_options[:hidden] || javascript_options[:embedded] ?
+      hidden_field_tag(name, value, options) :
+      text_field_tag(name, value, options)
+
+    calendar_date_select_output(tag, image, options, javascript_options)
+  end
+
+  # Similar to the difference between +text_field_tag+ and +text_field+, this method behaves like +text_field+
+  #
+  # It receives the same options as +calendar_date_select_tag+.  Need for time selection is automatically detected by checking the corresponding column meta information of Model#columns_hash
+  def calendar_date_select(object, method, options={})
+    obj = options[:object] || instance_variable_get("@#{object}")
+
+    if !options.include?(:time) && obj.class.respond_to?("columns_hash")
+      column_type = obj.class.columns_hash[method.to_s].type if obj.class.columns_hash.include?(method.to_s)
+      options[:time] = true if column_type == :datetime
+    end
+
+    use_time = options[:time]
+
+    if options[:time].to_s=="mixed"
+      use_time = false if Date===(obj.respond_to?(method) && obj.send(method))
+    end
+
+    image, options, javascript_options = calendar_date_select_process_options(options)
+
+    options[:value] ||=
+      if(obj.respond_to?(method) && obj.send(method).respond_to?(:strftime))
+        obj.send(method).strftime(CalendarDateSelect.date_format_string(use_time))
+      elsif obj.respond_to?("#{method}_before_type_cast")
+        obj.send("#{method}_before_type_cast")
+      elsif obj.respond_to?(method)
+        obj.send(method).to_s
+      else
+        begin
+          obj.send(method).strftime(CalendarDateSelect.date_format_string(use_time))
+        rescue
+          nil
+        end
+      end
+
+    tag = ActionView::Helpers::InstanceTag.new_with_backwards_compatibility(object, method, self, options.delete(:object))
+    calendar_date_select_output(
+      tag.to_input_field_tag( (javascript_options[:hidden] || javascript_options[:embedded]) ? "hidden" : "text", options),
+      image,
+      options,
+      javascript_options
+    )
+  end
+
+  private
+    # extracts any options passed into calendar date select, appropriating them to either the Javascript call or the html tag.
+    def calendar_date_select_process_options(options)
+      options, javascript_options = CalendarDateSelect.default_options.merge(options), {}
+      image = options.delete(:image)
+      callbacks = [:before_show, :before_close, :after_show, :after_close, :after_navigate]
+      for key in [:default_time, :time, :valid_date_check, :embedded, :buttons, :clear_button, :format, :year_range, :month_year, :popup, :hidden, :minute_interval, :readonly] + callbacks
+        javascript_options[key] = options.delete(key) if options.has_key?(key)
+      end
+
+      if (default_time = javascript_options[:default_time])
+        if default_time.respond_to?(:strftime)
+          javascript_options[:default_time] = "new Date('#{default_time.strftime(CalendarDateSelect.date_format_string(true))}')"
+        else 
+          javascript_options[:default_time] = "function() { return #{default_time} }"
+        end
+      end
+
+      # if passing in mixed, pad it with single quotes
+      javascript_options[:time] = "'mixed'" if javascript_options[:time].to_s=="mixed"
+      javascript_options[:month_year] = "'#{javascript_options[:month_year]}'" if javascript_options[:month_year]
+
+      # if we are forcing the popup, automatically set the readonly property on the input control.
+      if javascript_options[:popup].to_s == "force"
+        javascript_options[:popup] = "'force'"
+        options[:readonly] = true
+      end
+
+      if (vdc=javascript_options.delete(:valid_date_check))
+        if vdc.include?(";") || vdc.include?("function")
+          raise ArgumentError, ":valid_date_check function is missing a 'return' statement.  Try something like: :valid_date_check => 'if (date > new(Date)) return true; else return false;'" unless vdc.include?("return");
+        end
+
+        vdc = "return(#{vdc})" unless vdc.include?("return")
+        vdc = "function(date) { #{vdc} }" unless vdc.include?("function")
+        javascript_options[:valid_date_check] = vdc
+      end
+
+      javascript_options[:popup_by] ||= "this" if javascript_options[:hidden]
+
+      # surround any callbacks with a function, if not already done so
+      for key in callbacks
+        javascript_options[key] = "function(param) { #{javascript_options[key]} }" unless javascript_options[key].include?("function") if javascript_options[key]
+      end
+
+      javascript_options[:year_range] = format_year_range(javascript_options[:year_range] || 10)
+      [image, options, javascript_options]
+    end
+
+    def calendar_date_select_output(input, image, options = {}, javascript_options = {})
+      out = input
+      if javascript_options[:embedded]
+        uniq_id = "cds_placeholder_#{(rand*100000).to_i}"
+        # we need to be able to locate the target input element, so lets stick an invisible span tag here we can easily locate
+        out << content_tag(:span, nil, :style => "display: none; position: absolute;", :id => uniq_id)
+        out << javascript_tag("new CalendarDateSelect( $('#{uniq_id}').previous(), #{options_for_javascript(javascript_options)} ); ")
+      else
+        unless javascript_options[:readonly]
+          out << " "
+          out << image_tag(image,
+              :onclick => "new CalendarDateSelect( $(this).previous(), #{options_for_javascript(javascript_options)} );",
+              :style => 'border:0px; cursor:pointer;',
+  			      :class => 'calendar_date_select_popup_icon',
+              :id => options[:id]  + '_img')
+        end
+      end
+      out
+    end
+
+    def format_year_range(year) # nodoc
+      return year unless year.respond_to?(:first)
+      return "[#{year.first}, #{year.last}]" unless year.first.respond_to?(:strftime)
+      return "[#{year.first.year}, #{year.last.year}]"
+    end
+end
+
+# Helper method for form builders
+module ActionView
+  module Helpers
+    class FormBuilder
+      def calendar_date_select(method, options = {})
+        @template.calendar_date_select(@object_name, method, options.merge(:object => @object))
+      end
+    end
+  end
+end

data/lib/calendar_date_select/includes_helper.rb

@@ -0,0 +1,29 @@
+module CalendarDateSelect::IncludesHelper
+  # returns the selected calendar_date_select stylesheet (not an array)
+  def calendar_date_select_stylesheets(options = {})
+    options.assert_valid_keys(:style)
+    "calendar_date_select/#{options[:style] || "default"}"
+  end
+
+  # returns an array of javascripts needed for the selected locale, date_format, and calendar control itself.
+  def calendar_date_select_javascripts(options = {})
+    options.assert_valid_keys(:locale)
+    files = ["calendar_date_select/calendar_date_select"]
+    files << "calendar_date_select/locale/#{options[:locale]}" if options[:locale]
+    files << "calendar_date_select/#{CalendarDateSelect.format[:javascript_include]}" if CalendarDateSelect.format[:javascript_include]
+    files
+  end
+
+  # returns html necessary to load javascript and css to make calendar_date_select work
+  def calendar_date_select_includes(*args)
+    return "" if @cds_already_included
+    @cds_already_included=true
+    
+    options = (Hash === args.last) ? args.pop : {}
+    options.assert_valid_keys(:style, :locale)
+    options[:style] ||= args.shift
+    
+    javascript_include_tag(*calendar_date_select_javascripts(:locale => options[:locale])) + "\n" +
+    stylesheet_link_tag(*calendar_date_select_stylesheets(:style => options[:style])) + "\n"
+  end
+end

data/public/blank_iframe.html

@@ -0,0 +1,2 @@
+<!-- Nothing here; part of the calendar_date_select plugin -->
+<html><head></head><body></body></html>

data/public/javascripts/calendar_date_select/calendar_date_select.js

@@ -0,0 +1,448 @@
+// CalendarDateSelect version 1.16.1.1 - a prototype based date picker
+// Questions, comments, bugs? - see the project page: http://code.google.com/p/calendardateselect
+if (typeof Prototype == 'undefined') alert("CalendarDateSelect Error: Prototype could not be found. Please make sure that your application's layout includes prototype.js (.g. <%= javascript_include_tag :defaults %>) *before* it includes calendar_date_select.js (.g. <%= calendar_date_select_includes %>).");
+if (Prototype.Version < "1.6") alert("Prototype 1.6.0 is required.  If using earlier version of prototype, please use calendar_date_select version 1.8.3");
+
+Element.addMethods({
+  purgeChildren: function(element) { $A(element.childNodes).each(function(e){$(e).remove();}); },
+  build: function(element, type, options, style) {
+    var newElement = Element.buildAndAppend(type, options, style);
+    element.appendChild(newElement);
+    return newElement;
+  }
+});
+
+Element.buildAndAppend = function(type, options, style)
+{
+  var e = $(document.createElement(type));
+  $H(options).each(function(pair) { e[pair.key] = pair.value });
+  if (style) e.setStyle(style);
+  return e;
+};
+nil = null;
+
+Date.one_day = 24*60*60*1000;
+Date.weekdays = $w("S M T W T F S");
+Date.first_day_of_week = 0;
+Date.months = $w("January February March April May June July August September October November December" );
+Date.padded2 = function(hour) { var padded2 = parseInt(hour, 10); if (hour < 10) padded2 = "0" + padded2; return padded2; }
+Date.prototype.getPaddedMinutes = function() { return Date.padded2(this.getMinutes()); }
+Date.prototype.getAMPMHour = function() { var hour = this.getHours(); return (hour == 0) ? 12 : (hour > 12 ? hour - 12 : hour ) }
+Date.prototype.getAMPM = function() { return (this.getHours() < 12) ? "AM" : "PM"; }
+Date.prototype.stripTime = function() { return new Date(this.getFullYear(), this.getMonth(), this.getDate());};
+Date.prototype.daysDistance = function(compare_date) { return Math.round((compare_date - this) / Date.one_day); };
+Date.prototype.toFormattedString = function(include_time){
+  var hour, str;
+  str = Date.months[this.getMonth()] + " " + this.getDate() + ", " + this.getFullYear();
+  
+  if (include_time) { hour = this.getHours(); str += " " + this.getAMPMHour() + ":" + this.getPaddedMinutes() + " " + this.getAMPM() }
+  return str;
+}
+Date.parseFormattedString = function(string) { return new Date(string);}
+Math.floor_to_interval = function(n, i) { return Math.floor(n/i) * i;}
+window.f_height = function() { return( [window.innerHeight ? window.innerHeight : null, document.documentElement ? document.documentElement.clientHeight : null, document.body ? document.body.clientHeight : null].select(function(x){return x>0}).first()||0); }
+window.f_scrollTop = function() { return ([window.pageYOffset ? window.pageYOffset : null, document.documentElement ? document.documentElement.scrollTop : null, document.body ? document.body.scrollTop : null].select(function(x){return x>0}).first()||0 ); }
+
+_translations = {
+  "OK": "OK",
+  "Now": "Now",
+  "Today": "Today",
+  "Clear": "Clear"
+}
+SelectBox = Class.create();
+SelectBox.prototype = {
+  initialize: function(parent_element, values, html_options, style_options) {
+    this.element = $(parent_element).build("select", html_options, style_options);
+    this.populate(values);
+  },
+  populate: function(values) {
+    this.element.purgeChildren();
+    var that = this; $A(values).each(function(pair) { if (typeof(pair)!="object") {pair = [pair, pair]}; that.element.build("option", { value: pair[1], innerHTML: pair[0]}) });
+  },
+  setValue: function(value) {
+    var e = this.element;
+    var matched = false;
+    $R(0, e.options.length - 1 ).each(function(i) { if(e.options[i].value==value.toString()) {e.selectedIndex = i; matched = true;}; } );
+    return matched;
+  },
+  getValue: function() { return $F(this.element)}
+}
+CalendarDateSelect = Class.create();
+CalendarDateSelect.prototype = {
+  initialize: function(target_element, options) {
+    this.target_element = $(target_element); // make sure it's an element, not a string
+    if (!this.target_element) { alert("Target element " + target_element + " not found!"); return false;}
+    if (this.target_element.tagName != "INPUT") this.target_element = this.target_element.down("INPUT")
+    
+    this.target_element.calendar_date_select = this;
+    this.last_click_at = 0;
+    // initialize the date control
+    this.options = $H({
+      embedded: false,
+      popup: nil,
+      time: false,
+      buttons: true,
+      clear_button: true,
+      year_range: 10,
+      close_on_click: nil,
+      minute_interval: 5,
+      popup_by: this.target_element,
+      month_year: "dropdowns",
+      onchange: this.target_element.onchange,
+      valid_date_check: nil
+    }).merge(options || {});
+    this.use_time = this.options.get("time");
+    this.parseDate();
+    this.callback("before_show")
+    this.initCalendarDiv();
+    if(!this.options.get("embedded")) {
+      this.positionCalendarDiv()
+      // set the click handler to check if a user has clicked away from the document
+      Event.observe(document, "mousedown", this.closeIfClickedOut_handler = this.closeIfClickedOut.bindAsEventListener(this));
+      Event.observe(document, "keypress", this.keyPress_handler = this.keyPress.bindAsEventListener(this));
+    }
+    this.callback("after_show")
+  },
+  positionCalendarDiv: function() {
+    var above = false;
+    var c_pos = this.calendar_div.cumulativeOffset(), c_left = c_pos[0], c_top = c_pos[1], c_dim = this.calendar_div.getDimensions(), c_height = c_dim.height, c_width = c_dim.width; 
+    var w_top = window.f_scrollTop(), w_height = window.f_height();
+    var e_dim = $(this.options.get("popup_by")).cumulativeOffset(), e_top = e_dim[1], e_left = e_dim[0], e_height = $(this.options.get("popup_by")).getDimensions().height, e_bottom = e_top + e_height;
+    
+    if ( (( e_bottom + c_height ) > (w_top + w_height)) && ( e_bottom - c_height > w_top )) above = true;
+    var left_px = e_left.toString() + "px", top_px = (above ? (e_top - c_height ) : ( e_top + e_height )).toString() + "px";
+    
+    this.calendar_div.style.left = left_px;  this.calendar_div.style.top = top_px;
+    
+    this.calendar_div.setStyle({visibility:""});
+    
+    // draw an iframe behind the calendar -- ugly hack to make IE 6 happy
+    if(navigator.appName=="Microsoft Internet Explorer") this.iframe = $(document.body).build("iframe", {src: "javascript:false", className: "ie6_blocker"}, { left: left_px, top: top_px, height: c_height.toString()+"px", width: c_width.toString()+"px", border: "0px"})
+  },
+  initCalendarDiv: function() {
+    if (this.options.get("embedded")) {
+      var parent = this.target_element.parentNode;
+      var style = {}
+    } else {
+      var parent = document.body
+      var style = { position:"absolute", visibility: "hidden", left:0, top:0 }
+    }
+    this.calendar_div = $(parent).build('div', {className: "calendar_date_select"}, style);
+    
+    var that = this;
+    // create the divs
+    $w("top header body buttons footer bottom").each(function(name) {
+      eval("var " + name + "_div = that." + name + "_div = that.calendar_div.build('div', { className: 'cds_"+name+"' }, { clear: 'left'} ); ");
+    });
+    
+    this.initHeaderDiv();
+    this.initButtonsDiv();
+    this.initCalendarGrid();
+    this.updateFooter("&#160;");
+    
+    this.refresh();
+    this.setUseTime(this.use_time);
+  },
+  initHeaderDiv: function() {
+    var header_div = this.header_div;
+    this.close_button = header_div.build("a", { innerHTML: "x", href:"#", onclick:function () { this.close(); return false; }.bindAsEventListener(this), className: "close" });
+    this.next_month_button = header_div.build("a", { innerHTML: "&gt;", href:"#", onclick:function () { this.navMonth(this.date.getMonth() + 1 ); return false; }.bindAsEventListener(this), className: "next" });
+    this.prev_month_button = header_div.build("a", { innerHTML: "&lt;", href:"#", onclick:function () { this.navMonth(this.date.getMonth() - 1 ); return false; }.bindAsEventListener(this), className: "prev" });
+    
+    if (this.options.get("month_year")=="dropdowns") {
+      this.month_select = new SelectBox(header_div, $R(0,11).map(function(m){return [Date.months[m], m]}), {className: "month", onchange: function () { this.navMonth(this.month_select.getValue()) }.bindAsEventListener(this)}); 
+      this.year_select = new SelectBox(header_div, [], {className: "year", onchange: function () { this.navYear(this.year_select.getValue()) }.bindAsEventListener(this)}); 
+      this.populateYearRange();
+    } else {
+      this.month_year_label = header_div.build("span")
+    }
+  },
+  initCalendarGrid: function() {
+    var body_div = this.body_div;
+    this.calendar_day_grid = [];
+    var days_table = body_div.build("table", { cellPadding: "0px", cellSpacing: "0px", width: "100%" })
+    // make the weekdays!
+    var weekdays_row = days_table.build("thead").build("tr");
+    Date.weekdays.each( function(weekday) { 
+      weekdays_row.build("th", {innerHTML: weekday});
+    });
+    
+    var days_tbody = days_table.build("tbody")
+    // Make the days!
+    var row_number = 0, weekday;
+    for(var cell_index = 0; cell_index<42; cell_index++)
+    {
+      weekday = (cell_index+Date.first_day_of_week ) % 7;
+      if ( cell_index % 7==0 ) days_row = days_tbody.build("tr", {className: 'row_'+row_number++});
+      (this.calendar_day_grid[cell_index] = days_row.build("td", {
+          calendar_date_select: this,
+          onmouseover: function () { this.calendar_date_select.dayHover(this); },
+          onmouseout: function () { this.calendar_date_select.dayHoverOut(this) },
+          onclick: function() { this.calendar_date_select.updateSelectedDate(this, true); },
+          className: (weekday==0) || (weekday==6) ? " weekend" : "" //clear the class
+        },
+        { cursor: "pointer" }
+      )).build("div");
+      this.calendar_day_grid[cell_index];
+    }
+  },
+  initButtonsDiv: function()
+  {
+    var buttons_div = this.buttons_div;
+    if (this.options.get("time"))
+    {
+      var blank_time = $A(this.options.get("time")=="mixed" ? [[" - ", ""]] : []);
+      buttons_div.build("span", {innerHTML:"@", className: "at_sign"});
+      
+      var t = new Date();
+      this.hour_select = new SelectBox(buttons_div,
+        blank_time.concat($R(0,23).map(function(x) {t.setHours(x); return $A([t.getAMPMHour()+ " " + t.getAMPM(),x])} )),
+        { 
+          calendar_date_select: this, 
+          onchange: function() { this.calendar_date_select.updateSelectedDate( { hour: this.value });},
+          className: "hour" 
+        }
+      );
+      buttons_div.build("span", {innerHTML:":", className: "seperator"});
+      var that = this;
+      this.minute_select = new SelectBox(buttons_div,
+        blank_time.concat($R(0,59).select(function(x){return (x % that.options.get('minute_interval')==0)}).map(function(x){ return $A([ Date.padded2(x), x]); } ) ),
+        { 
+          calendar_date_select: this, 
+          onchange: function() { this.calendar_date_select.updateSelectedDate( {minute: this.value }) }, 
+          className: "minute" 
+        }
+      );
+      
+    } else if (! this.options.get("buttons")) buttons_div.remove();
+    
+    if (this.options.get("buttons")) {
+      buttons_div.build("span", {innerHTML: "&#160;"});
+      if (this.options.get("time")=="mixed" || !this.options.get("time")) b = buttons_div.build("a", {
+          innerHTML: _translations["Today"],
+          href: "#",
+          onclick: function() {this.today(false); return false;}.bindAsEventListener(this)
+        });
+      
+      if (this.options.get("time")=="mixed") buttons_div.build("span", {innerHTML: "&#160;|&#160;", className:"button_seperator"})
+      
+      if (this.options.get("time")) b = buttons_div.build("a", {
+        innerHTML: _translations["Now"],
+        href: "#",
+        onclick: function() {this.today(true); return false}.bindAsEventListener(this)
+      });
+      
+      if (!this.options.get("embedded") && !this.closeOnClick())
+      {
+        buttons_div.build("span", {innerHTML: "&#160;|&#160;", className:"button_seperator"})
+        buttons_div.build("a", { innerHTML: _translations["OK"], href: "#", onclick: function() {this.close(); return false;}.bindAsEventListener(this) });
+      }
+      if (this.options.get('clear_button')) {
+        buttons_div.build("span", {innerHTML: "&#160;|&#160;", className:"button_seperator"})
+        buttons_div.build("a", { innerHTML: _translations["Clear"], href: "#", onclick: function() {this.clearDate(); if (!this.options.get("embedded")) this.close(); return false;}.bindAsEventListener(this) });
+      }
+    }
+  },
+  refresh: function ()
+  {
+    this.refreshMonthYear();
+    this.refreshCalendarGrid();
+    
+    this.setSelectedClass();
+    this.updateFooter();
+  },
+  refreshCalendarGrid: function () {
+    this.beginning_date = new Date(this.date).stripTime();
+    this.beginning_date.setDate(1);
+    this.beginning_date.setHours(12); // Prevent daylight savings time boundaries from showing a duplicate day
+    var pre_days = this.beginning_date.getDay() // draw some days before the fact
+    if (pre_days < 3) pre_days += 7;
+    this.beginning_date.setDate(1 - pre_days + Date.first_day_of_week);
+    
+    var iterator = new Date(this.beginning_date);
+    
+    var today = new Date().stripTime();
+    var this_month = this.date.getMonth();
+    vdc = this.options.get("valid_date_check");
+    for (var cell_index = 0;cell_index<42; cell_index++)
+    {
+      day = iterator.getDate(); month = iterator.getMonth();
+      cell = this.calendar_day_grid[cell_index];
+      Element.remove(cell.childNodes[0]); div = cell.build("div", {innerHTML:day});
+      if (month!=this_month) div.className = "other";
+      cell.day = day; cell.month = month; cell.year = iterator.getFullYear();
+      if (vdc) { if (vdc(iterator.stripTime())) cell.removeClassName("disabled"); else cell.addClassName("disabled") };
+      iterator.setDate( day + 1);
+    }
+    
+    if (this.today_cell) this.today_cell.removeClassName("today");
+    
+    if ( $R( 0, 41 ).include(days_until = this.beginning_date.stripTime().daysDistance(today)) ) {
+      this.today_cell = this.calendar_day_grid[days_until];
+      this.today_cell.addClassName("today");
+    }
+  },
+  refreshMonthYear: function() {
+    var m = this.date.getMonth();
+    var y = this.date.getFullYear();
+    // set the month
+    if (this.options.get("month_year") == "dropdowns") 
+    {
+      this.month_select.setValue(m, false);
+      
+      var e = this.year_select.element; 
+      if (this.flexibleYearRange() && (!(this.year_select.setValue(y, false)) || e.selectedIndex <= 1 || e.selectedIndex >= e.options.length - 2 )) this.populateYearRange();
+      
+      this.year_select.setValue(y);
+      
+    } else {
+      this.month_year_label.update( Date.months[m] + " " + y.toString()  );
+    }
+  },
+  populateYearRange: function() {
+    this.year_select.populate(this.yearRange().toArray());
+  },
+  yearRange: function() {
+    if (!this.flexibleYearRange())
+      return $R(this.options.get("year_range")[0], this.options.get("year_range")[1]);
+      
+    var y = this.date.getFullYear();
+    return $R(y - this.options.get("year_range"), y + this.options.get("year_range"));
+  },
+  flexibleYearRange: function() { return (typeof(this.options.get("year_range")) == "number"); },
+  validYear: function(year) { if (this.flexibleYearRange()) { return true;} else { return this.yearRange().include(year);}  },
+  dayHover: function(element) {
+    var hover_date = new Date(this.selected_date);
+    hover_date.setYear(element.year); hover_date.setMonth(element.month); hover_date.setDate(element.day);
+    this.updateFooter(hover_date.toFormattedString(this.use_time));
+  },
+  dayHoverOut: function(element) { this.updateFooter(); },
+  clearSelectedClass: function() {if (this.selected_cell) this.selected_cell.removeClassName("selected");},
+  setSelectedClass: function() {
+    if (!this.selection_made) return;
+    this.clearSelectedClass()
+    if ($R(0,42).include( days_until = this.beginning_date.stripTime().daysDistance(this.selected_date.stripTime()) )) {
+      this.selected_cell = this.calendar_day_grid[days_until];
+      this.selected_cell.addClassName("selected");
+    }
+  },
+  reparse: function() { this.parseDate(); this.refresh(); },
+  dateString: function() {
+    return (this.selection_made) ? this.selected_date.toFormattedString(this.use_time) : "&#160;";
+  },
+  parseDate: function()
+  {
+    var value = $F(this.target_element).strip()
+    var default_time = this.options.get("default_time");
+    this.selection_made = (value != "" || default_time);
+    this.date = value=="" ? NaN : Date.parseFormattedString(this.options.get("date") || value);
+    if (isNaN(this.date) && !default_time)
+        this.date = new Date();
+    else if (isNaN(this.date) && default_time)
+        this.date = (Object.prototype.toString.apply(default_time) === '[object Function]') ? default_time() : default_time;
+
+    if (!this.validYear(this.date.getFullYear())) this.date.setYear( (this.date.getFullYear() < this.yearRange().start) ? this.yearRange().start : this.yearRange().end);
+    this.selected_date = new Date(this.date);
+    this.use_time = /[0-9]:[0-9]{2}/.exec(value) ? true : false;
+    this.date.setDate(1);
+  },
+  updateFooter:function(text) { if (!text) text = this.dateString(); this.footer_div.purgeChildren(); this.footer_div.build("span", {innerHTML: text }); },
+  clearDate:function() {
+    if ((this.target_element.disabled || this.target_element.readOnly) && this.options.get("popup") != "force") return false;
+    var last_value = this.target_element.value;
+    this.target_element.value = "";
+    this.clearSelectedClass();
+    this.updateFooter('&#160;');
+    if (last_value!=this.target_element.value) this.callback("onchange");
+  },
+  updateSelectedDate:function(partsOrElement, via_click) {
+    var parts = $H(partsOrElement);
+    if ((this.target_element.disabled || this.target_element.readOnly) && this.options.get("popup") != "force") return false;
+    if (parts.get("day")) {
+      var t_selected_date = this.selected_date, vdc = this.options.get("valid_date_check");
+      t_selected_date.setYear(parts.get("year"));
+      t_selected_date.setMonth(parts.get("month"));
+      t_selected_date.setDate(parts.get("day"));
+      
+      if (vdc && ! vdc(t_selected_date.stripTime())) { return false; }
+      this.selected_date = t_selected_date;
+      this.selection_made = true;
+    }
+    
+    if (!isNaN(parts.get("hour"))) this.selected_date.setHours(parts.get("hour"));
+    if (!isNaN(parts.get("minute"))) this.selected_date.setMinutes( Math.floor_to_interval(parts.get("minute"), this.options.get("minute_interval")) );
+    if (parts.get("hour") === "" || parts.get("minute") === "") 
+      this.setUseTime(false);
+    else if (!isNaN(parts.get("hour")) || !isNaN(parts.get("minute")))
+      this.setUseTime(true);
+    
+    this.updateFooter();
+    this.setSelectedClass();
+    
+    if (this.selection_made) this.updateValue();
+    if (this.closeOnClick()) { this.close(); }
+    if (via_click && !this.options.get("embedded")) {
+      if ((new Date() - this.last_click_at) < 333) this.close();
+      this.last_click_at = new Date();
+    }
+  },
+  closeOnClick: function() {
+    if (this.options.get("embedded")) return false;
+    if (this.options.get("close_on_click")===nil )
+      return (this.options.get("time")) ? false : true
+    else
+      return (this.options.get("close_on_click"))
+  },
+  navMonth: function(month) { (target_date = new Date(this.date)).setMonth(month); return (this.navTo(target_date)); },
+  navYear: function(year) { (target_date = new Date(this.date)).setYear(year); return (this.navTo(target_date)); },
+  navTo: function(date) {
+    if (!this.validYear(date.getFullYear())) return false;
+    this.date = date;
+    this.date.setDate(1);
+    this.refresh();
+    this.callback("after_navigate", this.date);
+    return true;
+  },
+  setUseTime: function(turn_on) {
+    this.use_time = this.options.get("time") && (this.options.get("time")=="mixed" ? turn_on : true) // force use_time to true if time==true && time!="mixed"
+    if (this.use_time && this.selected_date) { // only set hour/minute if a date is already selected
+      var minute = Math.floor_to_interval(this.selected_date.getMinutes(), this.options.get("minute_interval"));
+      var hour = this.selected_date.getHours();
+      
+      this.hour_select.setValue(hour);
+      this.minute_select.setValue(minute)
+    } else if (this.options.get("time")=="mixed") {
+      this.hour_select.setValue(""); this.minute_select.setValue("");
+    }
+  },
+  updateValue: function() {
+    var last_value = this.target_element.value;
+    this.target_element.value = this.dateString();
+    if (last_value!=this.target_element.value) this.callback("onchange");
+  },
+  today: function(now) {
+    var d = new Date(); this.date = new Date();
+    var o = $H({ day: d.getDate(), month: d.getMonth(), year: d.getFullYear(), hour: d.getHours(), minute: d.getMinutes()});
+    if ( ! now ) o = o.merge({hour: "", minute:""}); 
+    this.updateSelectedDate(o, true);
+    this.refresh();
+  },
+  close: function() {
+    if (this.closed) return false;
+    this.callback("before_close");
+    this.target_element.calendar_date_select = nil;
+    Event.stopObserving(document, "mousedown", this.closeIfClickedOut_handler);
+    Event.stopObserving(document, "keypress", this.keyPress_handler);
+    this.calendar_div.remove(); this.closed = true;
+    if (this.iframe) this.iframe.remove();
+    if (this.target_element.type != "hidden" && ! this.target_element.disabled) this.target_element.focus();
+    this.callback("after_close");
+  },
+  closeIfClickedOut: function(e) {
+    if (! $(Event.element(e)).descendantOf(this.calendar_div) ) this.close();
+  },
+  keyPress: function(e) {
+    if (e.keyCode==Event.KEY_ESC) this.close();
+  },
+  callback: function(name, param) { if (this.options.get(name)) { this.options.get(name).bind(this.target_element)(param); } }
+}