selector de fecha de jquery dividido en campos múltiples

Question

Tengo el selector de fechas Jquery habitual que funciona bien. Pero quiero alimentarlo en un conjunto de selectboxes en lugar de un campo de texto. He tenido éxito en alimentarlo en un campo de selección con un formato específico, pero no estoy seguro de cómo alimentar a los tres en diferentes campos con diferentes formatos.

$(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}); 

}); 

Esto no funciona, funciona en el último campo, pero ignora el primero. Si elimino el segundo conjunto de líneas altField y altFormat, el primero funciona.

También probé ponerlos en una serie,

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

El problema es el mismo que aquí:

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

¿Alguna idea?

Gracias,

Answer 1

me gustaría sugerir el uso de su instalación con un solo campo alternativo para conseguir la primera selección, a continuación, utilizando un controlador onClose para analizar la fecha y llenar las otras selecciones.

$(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]); 
               } 
            }); 
}); 

Answer 2

Esto es más sencillo que pienso:

$('#datePickerField').datepicker({ 
    onClose: function (dateText) { 
       var objDate = new Date(dateText); 
       $('#year_field').val(dateText.length ? objDate.getFullYear() : ''); 
       $('#month_field').val(dateText.length ? objDate.getMonth() + 1 : ''); 
       $('#day_field').val(dateText.length ? objDate.getDate() : ''); 
      } 
}); 

y si desea que los cambios realizados en el día, el mes, los campos de actualización año la datapicker principal:

$('#year_field,#month_field,#day_field').change(function() { 
    $('#datePickerField').datepicker('setDate', new Date(
     parseInt($('#year_field').val(), 10), 
     parseInt($('#month_field').val(), 10) - 1, 
     parseInt($('#day_field').val(), 10))); 
}); 

Answer 3

acaba de salir de una respuesta aquí para referencia futura, aquí hay una muestra de cómo lo hice:

$("#departDate").datepicker({ 
    onClose: function(selectedDate) { 

     // use split() to break down the [MM/DD/YYYY] format 
     // populate each into multiple field 

     $('#departDateDay').val(selectedDate.split(/\//)[1]); // day 
     $('#departDateMonth').val(selectedDate.split(/\//)[0]); // month 
     $('#departDateYear').val(selectedDate.split(/\//)[2]); // year 
    } 
})