Jak otworzyć drugi Datepicker interfejsu użytkownika podczas zamykania pierwszego?

Question

Próbuję dodać funkcjonalność do formularza z Datepicker JQuery UI.

Gdy użytkownik wybierze datę przyjazdu (onSelect), kilka rzeczy powinno się zdarzyć:

1. zaktualizować wyjazdu do 3 dni od daty przybycia (Działa to teraz :))
2. Splicie datę wyjazdu w 3 i dodaj każdą część do pola wejściowego (zobacz przykład daty przyjazdu w skrzypcach)
3. Po zamknięciu datownika przylotu (onClose), datownik powinien się otworzyć automatycznie, domyślnie zjadł wybrany w punkcie 1 (przykład: http://www.kayak.es)

Udało mi się uzyskać punkt 1 do pracy, ale jestem trochę zagubiony z innymi funkcjami. Jeśli ktokolwiek może mi pokazać, jak to zrobić, lub weź mnie na właściwą drogę, byłoby naprawdę świetnie! Nadal jestem początkującym, ale szybko się uczę.

Here's ryba, co mam teraz: http://jsfiddle.net/mattvic/B6Kax/13/

Answer 1

Podział daty wyjazdu w 3 i dodać każda część do pola wejściowego

Wygląda jak masz już kod napisany na ten cel w onSelect program obsługi docelowego datepika. Niestety wygląda on na setDatedoes not trigger that event i nie można go uruchomić ręcznie.Co polecam łamie ten kod się w oddzielnej funkcji, które można wywołać z obu miejscach:

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

Następnie zmień datepicker odejście onSelect obsługi zwrócić do tej funkcji:

$('#vertrek').datepicker({ 

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

Wreszcie wywołać tę funkcję z obsługi onSelect wydarzeniu swój przyjazd za:

/* 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()); 

---

Po przybyciu-datepicker zamyka (onClose) odejście-datepicker powinien otwierać się automatycznie, zalegających wybranej w momencie daty 1

to po prostu kwestia pomocą onClose obsługi zdarzenia:

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

Oto Twoja aktualizowane przykład: http://jsfiddle.net/zXMke/

Answer 2

pkt 3 odpowiedź:

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

masz już rozwiązanie dla punktu 2?

Cheers, Daddy

Answer 3

Odpowiadając na pytanie tytuáu:

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

Źródło:

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

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

polecam użyć onSelect zamiast onClose zdarzenia w celu upewnienia się, że 1. data została wybrane przed otwarciem drugiego datepika.