jQuery datepicker with formtastic and rails

application.js

/**
 * Shamlessly copied from http://snipt.net/boriscy/datetime-jquery-formtastic/
 *
 * This did not function with formtastic version 0.9.10
 * I had to move the live("change") event below the initializing part
 * I also had to adjust the jQuery selections as formtastic uses <ol>'s to
 * seperate every select box.
 */
$(document).ready(function() {

    // Define the dateFormat for the datepicker
    $.datepicker._defaults.dateFormat = 'dd M yy';
    
    /**
     * Replaces the date or datetime field with jquey-ui datepicker
     */
    $('.date, .datetime').each(function(i, el) {
        var input = document.createElement('input');
        $(input).attr({'type': 'text', 'class': 'ui-date-text'});
        // Insert the input:text before the first select
        $(el).find("select:first").before(input);
        $(el).find("select:lt(3)").hide();
        // Set the input with the value of the selects
        var values = [];
        $(el).find("select:lt(3)").each(function(i, el) {
            var val = $(el).val();
            if(val != '')
                values.push(val);
        });
        if( values.length > 1) {
            d = new Date(values[0], parseInt(values[1]) - 1, values[2]);
            $(input).val( $.datepicker.formatDate($.datepicker._defaults.dateFormat, d) );
        }

        $(input).datepicker();
    });

    /**
     * Sets the date for each select with the date selected with datepicker
     */
    $('input.ui-date-text').live("change", function() {
        var sels = $(this).closest('.date, .datetime').find("select:lt(3)");
        var d = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $(this).val() );
        
        $(sels[0]).val(d.getFullYear());
        $(sels[1]).val(d.getMonth() + 1);
        $(sels[2]).val(d.getDate());
    });

});

Hi,
I confirm this work in Rails3. Very nice. It works of a standard rails calendar select inputs (you need to 3 select box, not input_field btw).
However I needed to pass options to the datepicker like minDate, maxDate... and this gist could not do that.
So i modified line 35
$(input).datepicker();
to
$(input).datepicker( jQuery.parseJSON($(el).find("select:first").attr('rel')) );

That way your 'rel' attribute in your select box is used here to configure the datepicker widget.
Of course rel value is supposed to be a well-formed json string: e.g rel=' { "minDate:"+1D", "maxDate":"+12M" } '
You got the gist... ;-)

Extra bonus: I use Jose Valim's excellent simple_form gem to handle form, so for me it looks like this in my view:
<%= f.input :target_date, :input_html => { :rel => '{ "minDate:"+1D", "maxDate":"+12M" }' } %>

This is a lot nicer to setup: https://github.com/demersus/formtastic_datepicker_inputs

@KleranP: Correct that is easier. Just wish the jQuery-ui team would get the heads out of there... and support a good timepicker. While I'm on that topic wheres the bloody ThemeRoller ready navbar / Menu?!