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

J’utilise le widget jQuery Datepicker avec deux zones de saisie, une pour la date “From” et la seconde pour la date “To” . J’utilise la démo fonctionnelle jQuery Datepicker comme base pour faire fonctionner les deux zones de saisie, mais je dois pouvoir append ces ressortingctions supplémentaires:

  1. La plage de dates ne peut être antérieure au 1er décembre 2008

  2. “To” date peut être au plus tard aujourd’hui

  3. Une fois la date “From” sélectionnée, la date “To” ne peut être comprise que 7 jours après la date “From”

  4. Si une date “To” est sélectionnée en premier, la date “From” ne peut être que dans la plage de 7 jours avant la date “To” (la limite du 01 décembre étant la première date sélectionnable)

Je n’arrive pas à faire fonctionner tous les éléments ci-dessus.

En résumé, je souhaiterais pouvoir sélectionner une plage allant jusqu’à 7 jours entre le 01 décembre et aujourd’hui.

Mon code jusqu’ici

$(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 manque la ressortingction de scope de 7 jours et empêche également une sélection de date “To” avant le 01 décembre 2008 ou après aujourd’hui. Toute aide serait très appréciée, merci.

Merci beaucoup pour votre aide, Ben, je me suis enrichi de vos messages et je l’ai trouvé. 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 ressortingct 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 }; } 

Bon, que diriez-vous de cela:

 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 mieux que je puisse trouver qui réponde à toutes vos exigences (je pense ...)

Je me rends compte que je suis un peu en retard pour la fête, mais voici comment j’ai modifié le code exemple de travail. Je n’ai pas eu besoin de définir une date maximale et minimale précise, mais je ne voulais pas que la plage de dates se chevauchent, alors je les laisse simplement 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 plus haut, mais ce ne sont que des parameters par défaut.)

Semble faire ce dont j’ai besoin 🙂

Voir ici pour mon exemple.

Envisagez d’utiliser rangeSelect pour avoir un contrôle au lieu de deux.

Pour atteindre ce que vous recherchez, je suppose que vous devez append un écouteur onSelect, puis appeler datepicker( "option", settings ) pour modifier les parameters.

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 la deuxième fois. De plus, maxDate devrait vérifier txtEndDate, pas 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 la suivante.

Voici une solution que j’ai trouvée après avoir beaucoup cherché une solution à ce que j’estime être un problème commun. Cela “rebondit” efficacement les entrées autour d’une plage d’entrées partagées de jours compatibles. Signification – si j’ai deux champs, l’un peut être utilisé pour contraindre l’autre, et l’autre pourrait redéfinir l’original si nécessaire. Le but de ceci est de toujours veiller à ce qu’il n’y ait qu’un nombre limité de jours (ou de mois ou peu importe) entre les deux champs. Cet exemple spécifique limite également la quantité de temps dans le futur que quelque chose pourrait être sélectionné dans l’un ou l’autre domaine (par exemple 3 mois).

$("#startdate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var oldDate = new Date(dateText); var newDate = new Date(dateText); // Compute the Future Limiting Date newDate.setDate(newDate.getDate()+5); // Set the Widget Properties $("#enddate").datepicker('option', 'minDate', oldDate); $("#enddate").datepicker('option', 'maxDate', newDate); } }); $("#enddate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var endDate = new Date(dateText); var startDate = new Date(dateText); // Compute the Future Limiting Date startDate.setDate(startDate.getDate()-5); // Set the Widget Properties $("#startdate").datepicker('option', 'minDate', startDate); $("#startdate").datepicker('option', 'maxDate', endDate); } });
$("#startdate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var oldDate = new Date(dateText); var newDate = new Date(dateText); // Compute the Future Limiting Date newDate.setDate(newDate.getDate()+5); // Set the Widget Properties $("#enddate").datepicker('option', 'minDate', oldDate); $("#enddate").datepicker('option', 'maxDate', newDate); } }); $("#enddate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var endDate = new Date(dateText); var startDate = new Date(dateText); // Compute the Future Limiting Date startDate.setDate(startDate.getDate()-5); // Set the Widget Properties $("#startdate").datepicker('option', 'minDate', startDate); $("#startdate").datepicker('option', 'maxDate', endDate); } }); 

Voici comment je l’utilise:

 function customRange(input) { var min = new Date(); return { minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)), maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null) }; } 

C’est comme ça que je l’ai fait. J’ai pris la source du site Web de l’interface utilisateur de Jquery et l’ai modifiée pour y append vos contraintes.

 $(document).ready(function () { var dates = $('#StartDate, #EndDate').datepicker({ minDate: new Date(2008, 11, 1), maxDate: "+0D", dateFormat: "dd M yy", changeMonth: true, changeYear: true, onSelect: function (selectedDate) { var option = this.id == "StartDate" ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); var edate; var otherOption; var d; if (option == "minDate") { otherOption = "maxDate"; d = date.getDate() + 7; } else if (option == "maxDate") { otherOption = "minDate"; d = date.getDate() - 7; } var m = date.getMonth(); var y = date.getFullYear(); edate = new Date(y, m, d); dates.not(this).datepicker("option", option, date); dates.not(this).datepicker("option", otherOption, edate); } }); }); 

Idée initiale de: http://jqueryui.com/demos/datepicker/#date-range

Remarque: Vous avez également besoin d’une option pour réinitialiser / effacer les dates (par exemple, si un utilisateur choisit une date de début, la date de début devient limitée. Après avoir choisi une date de début si l’utilisateur choisit une date “La date de début est également limitée. Vous devez avoir une option claire pour permettre à l’utilisateur de choisir une date de début différente.”