JQuery UI sélecteur de date de date de fin 1 jour après la date de début

Donc je suis en train d'empêcher l'utilisateur de sélectionner la date de départ
pour être la même que la date d'arrivée à l'aide de jQuery UI Date sélecteur de gamme
(http://jqueryui.com/datepicker/#date-range). Je l'ai, là où ils sont
pas en mesure de les sélectionner avant la date d'arrivée, mais de plein droit maintenant, le
date d'arrivée et date de départ peuvent être les mêmes fichiers.
C'est le 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");
        }
    });

  });

C'est le 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>

Ce que je veux, c'est la date de départ par défaut en 1 jour après la date d'arrivée à chaque fois que la date d'enregistrement est sélectionné. Je vous remercie à l'avance

Un violon avec le code de débogage serait utile.

InformationsquelleAutor user1588572 | 2013-03-19

3

Vous ne pouvez pas ajouter de jours à l'aide de ce code
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")

Essayez plutôt ceci:
```
onClose: function( selectedDate, inst ) {
             var maxDate = new Date(Date.parse(selectedDate));
             maxDate.setDate(maxDate.getDate() - 1);            
            $( "#check-in" ).datepicker( "option", "maxDate", maxDate);
        }
```
Voici le violon: http://jsfiddle.net/RxTax/1/
- J'ai dû modifier votre violon pour la faire se comporter de la manière que je voulais mais que vous avez droit un quelque part. C'est ce que je l'ai changé pour: jsfiddle.net/RxTax/2
InformationsquelleAutor Setrákus Ra

changement minDate.setDate(maxDate.getDate() + 1);
pour minDate.setDate(minDate.getDate() + 1);

le fait est que c'est simplement de travailler avec dateFormat: "yy-mm-dd" et pas avec d'autres dateFormat régionales fr ou semblables.

J'ai écrit un work-around pour d'autres dateFormats à l'aide d'autres domaines. J'ai testé sur IE, chrome et Firefox, et fonctionne très 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" />

InformationsquelleAutor Francisco

-1

JQuery UI sélecteur de date de date de fin 1 jour après la date de début de la

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

Vous ne pouvez pas ajouter de jours à l'aide de ce code

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

Essayez plutôt ceci:

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

c'est en donnant l'erreur ReferenceError: maxDate n'est pas défini [Pause Sur Cette Erreur] minDate.setDate(maxDate.getDate() + 1);
Cela fonctionne - jsfiddle.net/wskhcgdq/1

InformationsquelleAutor Mohit Kumar Gupta

Vous devez vous connecter pour publier un commentaire.