Come aprire il secondo UI Datepicker alla chiusura del primo

Question

Sto tentando di aggiungere alcune funzionalità a un modulo con Datepicker dell'interfaccia utente di JQuery.

Quando un utente seleziona la data di arrivo (onSelect), alcune cose dovrebbero accadere:

1. Aggiornare la partenza a 3 giorni dopo la data di arrivo (Questo funziona adesso :))
2. Spalato la data di partenza in 3 e aggiungi ogni parte a un campo di immissione (vedi esempio di data di arrivo in Fiddle)
3. Quando il segnaposto arrivo-data chiude (onClose), la partenza-datapicker deve essere aperta automaticamente, in modo predefinito alla mangiato selezionato al punto 1 (esempio: http://www.kayak.es)

Sono riuscito a far funzionare il punto 1, ma sono un po 'perso con le altre funzionalità. Se qualcuno può mostrarmi come farlo o farmi seguire la strada giusta sarebbe davvero fantastico! Sono ancora un principiante ma sto imparando velocemente.

Here's un violino di quello che ho adesso: http://jsfiddle.net/mattvic/B6Kax/13/

Answer 1

Spalato la data di partenza in 3 e aggiungere ogni parte ad un campo di input

Sembra che hai già il codice scritto per questo in onSelect gestore del datapicker di destinazione. Sfortunatamente, sembra setDatedoes not trigger that event e non è possibile attivarlo manualmente.Quello che mi sento di raccomandare sta rompendo quel codice fuori in una funzione separata che è possibile chiamare da entrambi i luoghi:

function splitDepartureDate(dateText) { 
    var depSplit = dateText.split("-", 3); 
    $('#alt-vertrek-d').val(depSplit[0]); 
    $('#alt-vertrek-m').val(depSplit[1]); 
    $('#alt-vertrek-y').val(depSplit[2]); 
} 

poi cambiare datepicker partenza onSelect gestore per indicare che la funzione:

$('#vertrek').datepicker({ 

    // Prevent selecting departure date before arrival: 
    beforeShow: customRange, 
    onSelect: splitDepartureDate 
}); 

Infine, chiamare tale funzione dal gestore onSelect eventi del vostro arrivo:

/* snip: */ 

// Populate departure date field 
var nextDayDate = $('#aankomst').datepicker('getDate', '+3d'); 
nextDayDate.setDate(nextDayDate.getDate() + 3); 
$('#vertrek').datepicker('setDate', nextDayDate); 

// Manually call splitDepartureDate 
splitDepartureDate($("#vertrek").val()); 

---

Quando l'arrivo-datepicker chiude (onClose), la partenza-datepicker dovrebbe aprire automaticamente, inadempiente alla data selezionata nel punto 1

questa è solo una questione di usare il onClose gestore di eventi:

onClose: function() { 
    $("#vertrek").datepicker("show"); 
} 

Ecco il suo esempio aggiornamento: http://jsfiddle.net/zXMke/

Answer 2

punto 3 risposta:

$(function() { 
    $('#aankomst').datepicker({ 
    onClose: function(dateText, instance) { 
     $('#vertrek').datepicker('show'); 
    },  
    onSelect: function(dateText, instance) { 

     // Split arrival date in 3 input fields       
     var arrSplit = dateText.split("-"); 
     $('#alt-aankomst-d').val(arrSplit[0]); 
     $('#alt-aankomst-m').val(arrSplit[1]); 
     $('#alt-aankomst-y').val(arrSplit[2]); 

     // Populate departure date field 
     var nextDayDate = $('#aankomst').datepicker('getDate', '+3d'); 
     nextDayDate.setDate(nextDayDate.getDate() + 3); 
      $('#vertrek').datepicker('setDate', nextDayDate); 
      }     
     }); 
}); 

hai già la soluzione per il punto 2?

Cheers, papà

Answer 3

Rispondendo alla domanda del titolo:

$("#firsDate").datepicker('option',"onClose", function() { $("#secondDate").datepicker("show"); }); 

Fonte:

http://api.jqueryui.com/datepicker/#method-show

http://api.jqueryui.com/datepicker/#option-onClose

vi consiglio di usare onSelect invece di evento onClose al fine di assicurarsi che la prima data è stata selezionato prima di aprire il secondo datepicker.