Datepicker de Jquery sélectionner plusieurs plages de dates dans un calendrier

Mon exigence est de permettre à l'utilisateur de sélectionner plusieurs plages de dates dans un seul calendrier, également précédentes sélections de date ne devrait pas être autorisé à changer. Comment est-ce possible? Ci-dessous le code et le lien vers violon

HTML

<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

SCRIPT

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }

      return date;
    }
  } );
Où est le problème ici? Qu'entendez-vous par de multiples plages de dates?
par défaut, nous ne pouvez sélectionner une plage de dates, les exigences pour sélectionner plusieurs plages de dates sur un seul calendrier.

OriginalL'auteur Shanaka | 2017-04-18

  1. 0

    Malheureusement, ce n'est pas quelque chose que le datepicker plugin est capable de faire sortir de la boîte. Vous aurez besoin de JavaScript personnalisé pour permettre cela.

    J'ai trouvé une façon qui se rapproche de ce que vous souhaitez à l'aide de la onSelect et beforeShowDay événements. Il maintient son propre tableau de dates sélectionnées, donc, malheureusement, ne s'intègre pas avec une zone de texte indiquant la date, etc. Je suis juste l'utiliser comme une ligne de contrôle, et je peux alors interroger le tableau des dates choisies.

    La seule chose que vous auriez besoin de les modifier à propos de ce code est de regroupement tous les deux dates dans les plages, mais il y a plusieurs manières de le faire en fonction de votre choix UX. Personnellement, je voudrais juste le groupe tous les deux dates d'une plage dans l'ordre que l'utilisateur sélectionne. Alors si on ajoute une date à partir de n'importe quelle gamme, la gamme entière est supprimée (qui n'est pas codé ici, vous aurez besoin d'ajouter que).

    Voici mon code:

    <script>
//Maintain array of dates
var dates = new Array();
function addDate(date) {
if (jQuery.inArray(date, dates) < 0) 
dates.push(date);
}
function removeDate(index) {
dates.splice(index, 1);
}
//Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
var index = jQuery.inArray(date, dates);
if (index >= 0) 
removeDate(index);
else 
addDate(date);
}
//Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
var ret = new String(number);
if (ret.length == 1) 
ret = "0" + ret;
return ret;
}
jQuery(function () {
jQuery("#datepicker").datepicker({
onSelect: function (dateText, inst) {
addOrRemoveDate(dateText);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
//months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
var month = padNumber(date.getMonth() + 1);
var day = padNumber(date.getDate());
//This depends on the datepicker's date format
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
//Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
//Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>

    Et voici un violon: http://jsfiddle.net/gydL0epa/

    OriginalL'auteur lax1089

  2. 0

    Comme d'autres l'a déjà suggéré, mon MultiDatesPicker se rapproche de ce qu'il vous faut. Il permet déjà seule la sélection de la gamme, vous pouvez donc la fourche de ce plugin et de modifier/améliorer, afin de permettre plusieurs plages de sélection.

    Un rapide et sale solution serait de commenter la ligne où le tableau de dates sélectionnées est remis.

    OriginalL'auteur dubrox

  3. -1

    essayer cette 

    <!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.11.1.js"></script>
<script src="Scripts/jquery-ui-1.11.1.js"></script>
<script src="Scripts/jquery-ui.multidatespicker.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/jquery-ui.structure.css" rel="stylesheet" />
<link href="css/jquery-ui.theme.css" rel="stylesheet" />
<link href="css/pepper-ginder-custom.css" rel="stylesheet" />
<link href="css/prettify.css" rel="stylesheet" />
</head>
<body>
<input type="text" id="fromDate" />
<script>
$(function () {
$('#fromDate').multiDatesPicker();
});
</script>
</body>
</html>

    vous pouvez télécharger le fichier js à partir du lien https://sourceforge.net/projects/multidatespickr/

    cette solution est applicable pour une date unique sélection plusieurs fois, mais pas la gamme de sélection de la date.

    OriginalL'auteur Issac Johnson