web-dev-qa-db-fra.com

Restreindre la date dans jquery datepicker en fonction d'un autre datepicker ou textbox

J'ai deux zones de texte avec un sélecteur de date relié à eux. Les zones de texte correspondent aux dates de début et de fin. Le premier datepicker est configuré pour que l'utilisateur ne puisse pas choisir une date antérieure à aujourd'hui, mais puisse choisir n'importe quelle date dans le futur.

Comment puis-je configurer le deuxième datepicker afin qu'il ne puisse pas choisir une date avant la date choisie dans le premier sélecteur de date? Par exemple: Si aujourd'hui est le 12/11/10 et que je choisis 12/15/10 dans le premier sélecteur de date, le deuxième sélecteur de date ne devrait pas pouvoir choisir quoi que ce soit avant le 15/12/10.

Voici ce que j'ai jusqu'à présent:

$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
jquery-uijquery-ui-datepicker
31
The Muffin Man

Par exemple, dans cet exemple de code, startDatePicker est sélectionné en tant que 2010-12-12, l'événement change de startDatePicker définit la date minDate de endDatePicker 2010-12-13. Il verrouille les cellules avant cette date. Ceci est un exemple de ce que @Victor a mentionné..J’espère que cela aidera… Observez… Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    minDate: new Date(),
    maxDate: '+2y',
    onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);

       //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $("#endDatePicker").datepicker( "option", "minDate", endDate );
        $("#endDatePicker").datepicker( "option", "maxDate", '+2y' );

    }
});

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true
});
34
user403295

Mettre à jour:

L'approche ci-dessus ne définit la date minDate qu'au moment de la création ... J'ai utilisé l'événement onSelect pour modifier l'option minDate du deuxième sélecteur de date comme ceci:

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});
32
Nguyen Van Long

la solution de Tin Man a fonctionné pour moi après l'ajout de $ ("# txtEndDate"). datepicker () en bas

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});

$("#txtEndDate").datepicker(); //it is not working with out this line
6
aby

essayez cet homme:

$("#dateTo").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate:  new Date()
    }).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onSelect: function(){
        $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
    }
    }).datepicker("setDate", new Date());
4
Orlando Alfonso

Du point de vue de l'interface utilisateur pure, vous ne devriez pas. Si l'utilisateur sélectionne le mauvais mois sur les deux sélecteurs de date et essaie de sélectionner le mois correct, il subit une modification de 50% du fait que l'interface utilisateur le gêne. Idéalement, vous autoriseriez la sélection incorrecte et afficheriez un message d'erreur utile indiquant que la date de fin devrait être postérieure à la date de fin.

Si vous souhaitez implémenter votre idée: donnez à chaque datepicker un événement "change" qui modifie les options de l'autre datepicker de manière appropriée.

4
Victor Nicollet

Utilisez la méthode "getDate" de la première interface utilisateur datepicker et transmettez-la à l'option minDate du deuxième datepicker:

$("#txtEndDate").datepicker({
    showOn: "both",
    minDate: $("#txtStartDate").datepicker("getDate")
});
3
Nguyen Van Long

Utilisez ce code:

<script type="text/javascript">
    $(function () {
        $("#txtStartDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
            minDate: 'dateToday'
        });
        $("#txtEndDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
             minDate: $("#txtStartDate").datepicker("getDate") });
        });
</script>
1
Anjyr
 $startDateCtrl.change(function () {
            setMinEndDateValue($startDateCtrl, $endDateCtrl);
        });

 $endDateCtrl.datepicker();

J'ai deux sélecteurs de date de début et de fin . Date de fin date min et date maximale que nous définissons en fonction de la sélection de début à . Date de début Min pour le sélecteur de date de fin est la date de début à partir de la sélection de sélecteur de début . Max. la date de fin du sélecteur de date de fin est sélectionnée. date de début du sélecteur de date de début + 7 jours.

function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
            var $maxSchedulingDate = new Date(@MaxDate.Year, @MaxDate.Month -1, @MaxDate.Day );
            var $startDate = $startDateCtrl.val();
            var $selectedStartDate = new Date($startDate);
            $selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
            var $maxEndDate = new Date();
            if ($selectedStartDate > $maxSchedulingDate) {
                $maxEndDate = $maxSchedulingDate;
            }
            else {
                $maxEndDate = $selectedStartDate;
            }
            $endDateCtrl.datepicker("option", "minDate", $startDate);
            $endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
        }
0
Jaydeep Shil

En me basant sur les réponses précédentes dans ce fil de discussion, je pensais qu'une solution fonctionnant avec les valeurs par défaut et réappliquant les dates min et max serait utile:

// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);

// To
$("#datepickerTo").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);

function limitToDateSpan(currentFromDate) {
  $("#datepickerTo").datepicker("option", "minDate", currentFromDate);

  var maxDate = new Date(currentFromDate.getTime());
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  $("#datepickerTo").datepicker("option", "maxDate", maxDate);
}

limitToDateSpan(defaultFromDate);

// From
$("#datepickerFrom").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
  minDate: "2013-01-01",
  maxDate: "+1Y",
  onSelect: function (dateText) {
    limitToDateSpan(new Date(dateText));
  }
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
0
Rasmus Björling