Así que estoy tratando de restringir al usuario de seleccionar la fecha de salida
a ser la misma que la fecha de check-in utilizando la interfaz de usuario jQuery selector de rango de Fecha
(http://jqueryui.com/datepicker/#date-range). He allí donde estén
no se puede seleccionar antes de la fecha de check-in, pero a partir de ahora la
fecha de check-in y check-out de la fecha de los mismos archivos.
Este es el jquery

  $(function() {
      $( "#check-in" ).datepicker({
        minDate: 0,
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 2,
        changeYear: true,
        onClose: function( selectedDate, inst ) {
            $( "#check-out" ).datepicker( "option", "minDate", selectedDate);
        }
    });

    $( "#check-out" ).datepicker({
        minDate: "+1D",
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 2,
        changeYear: true,
        onClose: function( selectedDate, inst ) {
            $( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D");
        }
    });

  });

Este es el HTML

<div class="formInput">
    <label for="check-in">Check-in:</label>
    <input type="text" id="check-in" name="check-in" value="yyyy/mm/dd" size="30" class="textInput">
</div>

    <div class="formInput">
        <label for="check-out">Check-out:</label>
        <input type="text" id="check-out" name="check-out" value="yyyy/mm/dd" size="30" class="textInput">
    </div>

Lo que yo quiero es la fecha de salida predeterminado a 1 día después de la fecha de check in cada vez que la fecha de check-in está seleccionado. Gracias de antemano

  • Un trastear con el código de depuración sería de gran ayuda.
InformationsquelleAutor user1588572 | 2013-03-19

3 Comentarios

  1. 3

    No se puede agregar días de usar este código
    $( «#check-in» ).datepicker( «option», «maxDate», selectedDate +»+1D»)

    Intente esto en su lugar:

    onClose: function( selectedDate, inst ) {
                 var maxDate = new Date(Date.parse(selectedDate));
                 maxDate.setDate(maxDate.getDate() - 1);            
                $( "#check-in" ).datepicker( "option", "maxDate", maxDate);
            }

    Aquí está el violín: http://jsfiddle.net/RxTax/1/

    • He tenido que editar su violín para hacer que se comporte de la manera que yo quería, pero que se haga uno en alguna parte. Esto es lo que he cambiado a: jsfiddle.net/RxTax/2
  2. 0

    cambio minDate.setDate(maxDate.getDate() + 1);
    a minDate.setDate(minDate.getDate() + 1);

    el hecho es que es trabajar con dateFormat: «aa-mm-dd» y no con otros dateFormat como regional fr o igual.

    He escrito una obra para los otros dateFormats el uso alternativo de los campos. He probado en IE, chrome y Firefox y funciona bastante bien.

    function resetFrom() {
    var altcheck-in = document.getElementById("altcheck-in");
    var check-in= document.getElementById("check-in");
    altcheck-in.value = "";
    if (altcheck-in.value == "") {
    check-in.value = "";
    $("#check-out").datepicker("destroy");
    $("#check-out").datepicker({
    minDate: "+1D",
    dateFormat: "yy-mm-dd",
    altFormat: "dd-mm-yy",
    altField: "#altcheck-out",
    changeMonth: true,
    numberOfMonths: 1,
    changeYear: true,
    showOn: "button",
    buttonImage: "/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    onClose: function (selectedDate) {
    if (selectedDate != "") {
    var maxDate = new Date(Date.parse(selectedDate));
    maxDate.setDate(maxDate.getDate() - 1);
    $("#check-in").datepicker("option", "maxDate", maxDate);
    }
    }
    });
    }
    }
    function resetTo() {
    var altcheck-out = document.getElementById("altcheck-out");
    var check-out = document.getElementById("check-out");
    altTo.value = "";
    if (altcheck-out.value == "") {
    to.value = "";
    $("#check-in").datepicker("destroy");
    $("#check-in").datepicker({
    dateFormat: "yy-mm-dd",
    altFormat: "dd-mm-yy",
    altField: "#altcheck-in",
    minDate: 0,
    changeMonth: true,
    numberOfMonths: 1,
    changeYear: true,
    showOn: "button",
    buttonImage: "/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    onClose: function (selectedDate) {
    if (selectedDate != "") {
    var minDate = new Date(Date.parse(selectedDate));
    minDate.setDate(minDate.getDate() + 1);
    $("#check-out").datepicker("option", "minDate", minDate);
    }
    }
    });
    }
    }
    $(function () {
    $("#check-in").datepicker({
    dateFormat: "yy-mm-dd",
    altFormat: "dd-mm-yy",
    altField: "#altcheck-in",
    minDate: 0,
    changeMonth: true,
    numberOfMonths: 1,
    changeYear: true,
    showOn: "button",
    buttonImage: "/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    onClose: function (selectedDate) {
    if (selectedDate != "") {
    var minDate = new Date(Date.parse(selectedDate));
    minDate.setDate(minDate.getDate() + 1);
    $("#check-out").datepicker("option", "minDate", minDate);
    }
    }
    });
    $("#check-out").datepicker({
    minDate: "+1D",
    dateFormat: "yy-mm-dd",
    altFormat: "dd-mm-yy",
    altField: "#altcheck-out",
    changeMonth: true,
    numberOfMonths: 1,
    changeYear: true,
    showOn: "button",
    buttonImage: "/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    onClose: function (selectedDate) {
    if (selectedDate != "") {
    var maxDate = new Date(Date.parse(selectedDate));
    maxDate.setDate(maxDate.getDate() - 1);
    $("#check-in").datepicker("option", "maxDate", maxDate);
    }
    }
    });
    });
    <input name="altcheck-in" type="text" id="altcheck-in" onchange="resetFrom();" style="width:250px;" />
    <input name="check-in" type="text" id="check-in" style="display: none" />
    <input name="altcheck-out" type="text" id="altcheck-out" onchange="resetTo();" style="width:250px;" />
    <input name="check-out" type="text" id="check-out" style="display: none" />
  3. -1

    De interfaz de usuario JQuery selector de fecha de fecha fin 1 día después de la fecha de inicio

    http://jsfiddle.net/wskhcgdq/1/

    No se puede agregar días de usar este código

     $( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")

    Intente esto en su lugar:

     $(function() {
    $( "#check-in" ).datepicker({
    minDate: 0,
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    numberOfMonths: 2,
    changeYear: true,
    onClose: function( selectedDate, inst ) {
    var minDate = new Date(Date.parse(selectedDate));
    minDate.setDate(maxDate.getDate() + 1);
    $( "#check-out" ).datepicker( "option", "minDate", minDate);
    }
    });
    $( "#check-out" ).datepicker({
    minDate: "+1D",
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    numberOfMonths: 2,
    changeYear: true,
    onClose: function( selectedDate, inst ) {
    var maxDate = new Date(Date.parse(selectedDate));
    maxDate.setDate(maxDate.getDate() - 1);            
    $( "#check-in" ).datepicker( "option", "maxDate", maxDate);
    }
    });
    });
    • se está dando error ReferenceError: maxDate no está definida [Pausa En Este Error] minDate.setDate(maxDate.getDate() + 1);
    • Esto va a funcionar – jsfiddle.net/wskhcgdq/1

Dejar respuesta

Please enter your comment!
Please enter your name here