jquery date picker aufgeteilt in mehrere Felder

Question

Ich habe den üblichen Jquery Datepicker funktioniert gut. Aber ich möchte es in eine Reihe von Auswahlfeldern statt in ein Textfeld einspeisen. Ich habe Erfolg gehabt, es in ein select Feld mit einem spezifischen Format zu füttern, bin aber unsicher, wie man alle drei in verschiedene Felder mit verschiedenen Formaten füttert.

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

}); 

Das funktioniert nicht, es funktioniert auf dem letzten Feld, ignoriert aber die erste. Wenn ich den zweiten Satz von altField- und altFormat-Zeilen entferne, funktioniert der erste.

Ich habe auch versucht, sie in einer Reihe setzen,

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

Das Problem ist die gleiche wie hier:

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

Irgendwelche Ideen?

Danke,

Answer 1

Ich würde vorschlagen, mit einem einzigen alternativen Feld mit Ihrem eingerichtet, um die ersten Auswahl zu bekommen, dann einen onClose Handler mit dem Datum zu analysieren und die andere wählen zu füllen.

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

Das ist einfacher Ich denke:

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

und wenn Sie Änderungen an Tag gemacht wollen, Monat, Jahr Felder Hauptdatapicker aktualisieren:

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

so dass nur eine hier Antwort für zukünftige Referenz, hier ist ein Beispiel, wie ich es tat:

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