jQuery datepicker - 2 entrées / zones de texte et plage de restriction

Question

Je suis en utilisant le Datepicker de jQuery widget avec deux zones d'entrée, une pour le "De" la date et le deuxième avec le "À" date. Je suis en utilisant le Datepicker de jQuery fonctionnelle démo en tant que base pour l'obtention des deux zones de saisie de travailler les uns avec les autres, mais j'ai besoin d'être en mesure d'ajouter ces restrictions supplémentaires:

1. La plage de Date peut être antérieure à Le 01 décembre 2008

2. "" Date peut être pas plus tard aujourd'hui

3. Une fois qu'un "De"date est sélectionné, le "À" date ne peut être dans une fourchette de 7 jours après le "De" date

4. Si un "À" la date est sélectionné en premier, puis le "De"date ne peut être dans la plage de 7 jours avant le "À" date (avec le limite du 01 décembre étant la première sélectionnable date)

Je n'arrive pas à obtenir tous les ci-dessus à travailler ensemble.

En résumé, je voudrais être en mesure de sélectionner une gamme de jusqu'à 7 jours entre le 01 décembre et aujourd'hui (je me rends compte que j'ai écris sur ce 1er décembre, afin de ne faire aujourd'hui, pour le moment).

Mon code jusqu'à présent

$(function () {

$('#txtStartDate, #txtEndDate').datepicker(
            {
            showOn: "both",
            beforeShow: customRange,
            dateFormat: "dd M yy",
            firstDay: 1, 
            changeFirstDay: false
            });
});

function customRange(input) 
{ 

return {
         minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null),
         minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), 
         maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
       }; 
}

Je vais manquer les 7 jours de restriction de gamme et aussi pour éviter un "À" sélection de la date d'avant le 01 décembre 2008 ou après aujourd'hui. Toute aide serait grandement apprécié, Merci.

Answer 1

Merci beaucoup pour votre aide, Ben, je me suis inspiré de vos messages et je l’ai imaginé. Il est maintenant complet et fonctionne avec brio!

Voici une démo de travail . Ajouter / modifier à l'URL pour voir le code

Code complet ci-dessous -

 $(function () 
{   
    $('#txtStartDate, #txtEndDate').datepicker({
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
        firstDay: 1, 
        changeFirstDay: false
    });

});

function customRange(input) { 
    var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date
        dateMin = min,
        dateMax = null,
        dayRange = 6; // Set this to the range of days you want to restrict to

    if (input.id === "txtStartDate") {
        if ($("#txtEndDate").datepicker("getDate") != null) {
            dateMax = $("#txtEndDate").datepicker("getDate");
            dateMin = $("#txtEndDate").datepicker("getDate");
            dateMin.setDate(dateMin.getDate() - dayRange);
            if (dateMin < min) {
                dateMin = min;
            }
        }
        else {
            dateMax = new Date; //Set this to your absolute maximum date
        }                      
    }
    else if (input.id === "txtEndDate") {
        dateMax = new Date; //Set this to your absolute maximum date
        if ($("#txtStartDate").datepicker("getDate") != null) {
            dateMin = $("#txtStartDate").datepicker("getDate");
            var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange);

            if(rangeMax < dateMax) {
                dateMax = rangeMax; 
            }
        }
    }
    return {
        minDate: dateMin, 
        maxDate: dateMax
    };     
}
 

Answer 2

Je me rends compte que je suis un peu en retard à la fête, mais voici comment j'ai modifié le code d'exemple. Je n'avais pas besoin de définir une date maximale et minimale spécifique, je ne voulais tout simplement pas que la plage de dates se chevauche, alors je les ai simplement laissés se définir:

 jQuery(function() {
  jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', {
    beforeShow: customRange
  });
});

function customRange(input) {
  if (input.id == 'calendardatetime_required_to') {
    return {
      minDate: jQuery('#calendardatetime_required_from').datepicker("getDate")
    };
  } else if (input.id == 'calendardatetime_required_from') {
    return {
      maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate")
    };
  }
}
 

(Mes datepickers étaient déjà initialisés dans un script, mais ce ne sont que des paramètres par défaut.)

Semble faire ce dont j'ai besoin :)

Voir ici pour mon exemple.

Answer 3

Bon, que diriez-vous de ceci:

 function customRange(input) 
{ 
    var min = new Date(2008, 12 - 1, 1);
	var dateMin = min;
	var dateMax = null;

	if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null)
	{
		dateMax = $("#txtEndDate").datepicker("getDate");
		dateMin = $("#txtEndDate").datepicker("getDate");
		dateMin.setDate(dateMin.getDate() - 7);
		if (dateMin < min)
		{
			dateMin = min;
		}			
	}
	else if (input.id == "txtEndDate")
	{
		dateMax = new Date();
		if ($("#txtStartDate").datepicker("getDate") != null)
		{
			dateMin = $("#txtStartDate").datepicker("getDate");
			dateMax = $("#txtStartDate").datepicker("getDate");
			dateMax.setDate(dateMax.getDate() + 7); 
		}
	}
    return {
     minDate: dateMin, 
     maxDate: dateMax
   }; 

}
 

C’est le meilleur que je puisse proposer qui réponde à toutes vos exigences (je pense…)

Answer 4

Pensez à utiliser rangeSelect pour avoir un contrôle au lieu de deux.

Pour obtenir ce que vous recherchez, vous devez ajouter un écouteur onSelect, puis appeler datepicker( "option", settings ) pour modifier les paramètres.

Answer 5

Votre date de début pour txtStartDate ne fonctionne pas car votre deuxième minDate est définie sur null lorsqu'elle vérifie l'entrée.id pour la deuxième fois. En outre, maxDate devrait rechercher txtEndDate et non txtStartDate. Essaye ça:

     function customRange(input) 
{ 
	var mDate = (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : $("#txtStartDate").datepicker("getDate"));
	return {
         minDate: mDate, 
         maxDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate").getDate() + 5 : null)
       }; 
}
 

Je ne sais pas pourquoi le «+ 5» au lieu de «+ 7», mais si j'ajoute 0, j'obtiens une plage de dates sélectionnable du jour que j'ai choisi plus le suivant.