Selezione data jquery suddivisa in più campi

Question

Ho il solito Jacquery DatePicker che funziona bene. Ma voglio dargli da mangiare in una serie di selectbox anziché in un campo di testo. Ho avuto successo inserendolo in un campo selezionato con un formato specifico, ma non sono sicuro di come alimentare tutti e tre in campi diversi con formati diversi.

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

}); 

Questo non funziona, funziona sull'ultimo campo, ma ignora il primo. Se rimuovo il secondo set di righe altField e altFormat, il primo funziona.

Ho provato anche mettendoli in una serie,

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

Il problema è lo stesso qui:

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

Tutte le idee?

Grazie,

Answer 1

Io suggerirei di usare il set con un unico campo alternativo per ottenere la prima selezione, quindi utilizzando un gestore onClose per analizzare la data e riempire gli altri seleziona.

$(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

Questo è più semplice che penso:

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

e se si desidera che le modifiche apportate al giorno, il mese, i campi anno aggiorno il datapicker principale:

$('#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

solo di lasciare una risposta qui per riferimento futuro, ecco un esempio di come l'ho fatto:

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