jquery date picker split into multiple fields

Question

I have the usual Jquery datepicker working fine. But I want to feed it into a set of selectboxes rather than one textfield. I have had success feeding it into one select field with a specific format but am unsure how to feed all three into different fields with different formats.

$(document).ready(function(){
  $("#search_startdate").datepicker({showOn: 'button', 
                                     buttonImage: '/images/cal/calendar.gif', 
                                     buttonImageOnly: true, 
                                     minDate: 0, 
                                     maxDate: '+6M +10D', 
                                     showAnim: 'fadeIn',
                                     altField: '#startdate_month', 
                                     altFormat: 'MM',
                                     altField: '#startdate_day',
                                     altFormat: 'dd'});
    //$("#datepicker").datepicker({showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true});

});

This doesn't work, it works on the last field, but ignores the first. If I remove the second set of altField and altFormat lines, the first works.

I also tried putting them in a series,

altField: '#startdate_month', '#start_day', altFormat: 'MM', 'dd'

The problem is the same as here:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_24767646.html

Any ideas?

Thanks,

Answer 1

I'd suggest using your set up with a single alternate field to get the first select, then using an onClose handler to parse the date and fill the other selects.

$(document).ready(function(){
  $("#search_startdate").datepicker({showOn: 'button', 
                                     buttonImage: '/images/cal/calendar.gif', 
                                     buttonImageOnly: true, 
                                     minDate: 0, 
                                     maxDate: '+6M +10D', 
                                     showAnim: 'fadeIn',
                                     altField: '#startdate_month', 
                                     altFormat: 'MM',
                                     onClose: function(dateText,picker) {
                                                 $('#startdate_day').val( dateText.split(/\//)[1] );
                                              }
                                    });
});