Cómo abrir la segunda UI Datepicker al cerrar la primera

Question

Intento agregar algunas funcionalidades a un formulario con el Datepicker de JQuery UI.

Cuando un usuario selecciona la fecha de llegada (onSelect), algunas cosas deben suceder:

1. actualización de la salida a 3 días después de la fecha de llegada (Esto funciona ahora :))
2. de Split la fecha de salida en 3 y añadir cada parte a un campo de entrada (ver ejemplo fecha de llegada en violín)
3. cuando se cierra la llegada-datepicker (onClose), la salida-datepicker debe abrir automáticamente, por defecto a la d comió seleccionado en el punto 1 (ejemplo: http://www.kayak.es)

Logré que el punto 1 funcionara, pero estoy un poco perdido con las otras características. Si alguien puede mostrarme cómo hacer esto o ponerme en el camino correcto, ¡sería realmente genial! Todavía soy un principiante pero aprendo rápido.

tope aquí tienes un violín de lo que tengo ahora: http://jsfiddle.net/mattvic/B6Kax/13/

Answer 1

Dividir la fecha de salida de 3 y añadir cada parte a un campo de entrada

Parece que ya tiene el código escrito para esto en el onSelect manejador del datepicker de destino. Desafortunadamente, se ve como setDatedoes not trigger that event, y no se puede activar manualmente.Lo que yo recomendaría es romper ese código a cabo en una función independiente que se puede llamar desde ambos lugares:

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

luego cambia de selector de fecha de salida onSelect manejador para apuntar a esa función:

$('#vertrek').datepicker({ 

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

Por último, llamar a esa función desde el manejador de eventos onSelect de su llegada:

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

---

Cuando la llegada-selector de fechas cierra (onClose), la salida-selector de fechas debe abrir de forma automática, el impago a la fecha seleccionada en el punto 1

esto es sólo una cuestión de usar la onClose controlador de eventos:

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

Ésta es tu ejemplo actualización: http://jsfiddle.net/zXMke/

Answer 2

punto 3 respuesta:

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

ya tiene la solución para el punto 2?

Saludos, papá

Answer 3

Responder a la pregunta del título:

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

Fuente:

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

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

recomiendo usar onSelect en lugar de evento onClose con el fin de asegurarse de que la primera fecha ha sido seleccionado antes de abrir el segundo datepicker.