web-dev-qa-db-fra.com

Jquery Datepicker sélectionne 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. Les sélections de dates précédentes ne doivent pas être autorisées à changer. Comment est-ce possible? Vous trouverez ci-dessous le code et le lien vers fiddle

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;
    }
  } );
javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
5
Shanaka

S'il vous plaît vérifier cela pourrait résoudre votre problème.

$(function() {
    $('input[name="daterange"]').daterangepicker();
    $('input[name="daterange"]').change(function(){
      $(this).val();
      console.log($(this).val());
    });
});
<html>
<head>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>
<body>
  <input class="pull-right" type="text" name="daterange" value="01/15/2020 - 02/15/2010">
</body>
</html>

1
ankit verma

Comme d'autres l'ont déjà suggéré, mon MultiDatesPicker se rapproche de vos besoins. Il permet déjà la sélection d'une seule plage , de sorte que vous pouvez créer ce plug-in et l'éditer/l'améliorer pour permettre la sélection de plusieurs plages. 

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

0
dubrox

Malheureusement, ce n'est pas quelque chose que le plugin datepicker est capable de faire par défaut. Vous aurez besoin d'un JavaScript personnalisé pour l'activer.

J'ai trouvé un moyen qui se rapproche de ce que vous voulez en utilisant les événements onSelect et beforeShowDay. Il conserve son propre tableau de dates sélectionnées. Par conséquent, malheureusement, il ne s'intègre pas dans une zone de texte affichant la date actuelle, etc. Je l'utilise simplement en tant que contrôle en ligne et je peux ensuite interroger le tableau pour connaître les dates sélectionnées. 

La seule chose que vous devriez modifier à propos de ce code est de regrouper toutes les deux dates en plages, mais il existe plusieurs façons de le faire, en fonction de votre UX souhaitée. Personnellement, je voudrais simplement regrouper toutes les deux dates sous forme de plage dans l'ordre de sélection de l'utilisateur. Ensuite, s’ils suppriment une date de n’importe quelle plage, toute la plage est supprimée (ce qui n’est pas codé ici, vous devrez l’ajouter).

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/

0
lax1089