wake-up-neo.com

Jquery Datepicker wählt mehrere Datumsbereiche in einem Kalender aus

Meine Anforderung ist, dass der Benutzer mehrere Datumsbereiche in einem einzigen Kalender auswählen kann. Auch die Auswahl früherer Datumsangaben darf nicht zulässig sein. Wie ist das möglich? Unten ist der Code und der Link zu Geige

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">

SKRIPT

$( 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;
    }
  } );
5
Shanaka

Bitte überprüfen Sie, ob das Problem möglicherweise behoben wird.

$(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

Wie bereits von anderen vorgeschlagen, kommt mein MultiDatesPicker an Ihre Bedürfnisse heran. Es erlaubt bereits Einzelbereichswahl , so dass Sie das Plug-In zusammenfassen und bearbeiten/verbessern können, um die Auswahl von mehrere Bereiche zuzulassen. 

Eine schnelle und schmutzige Lösung wäre das Auskommentieren von der Zeile, in der das Array der ausgewählten Daten zurückgesetzt wird .

0
dubrox

Ich denke, dieser Multi Datepicker wird Ihnen helfen, Ihr Problem zu lösen.

$('#mdp-demo').multiDatesPicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="mdp-demo"></div>
0
thanveer pu

Leider ist das Datepicker-Plugin nicht in der Lage, dies zu tun. Sie benötigen ein benutzerdefiniertes JavaScript, um dies zu aktivieren.

Ich habe mit den Ereignissen onSelect und beforeShowDay einen Weg gefunden, der dem nahe kommt, was Sie wollen. Es verfügt über ein eigenes Array ausgewählter Datumsangaben, kann also leider nicht in ein Textfeld integriert werden, das das aktuelle Datum usw. anzeigt. Ich verwende es nur als Inline-Steuerelement und kann dann das Array nach dem aktuell ausgewählten Datum abfragen. 

Das einzige, was Sie an diesem Code ändern müssen, ist das Gruppieren aller zwei Datumsangaben in Bereiche. Es gibt jedoch mehrere Möglichkeiten, dies je nach gewünschter UX auszuführen. Ich persönlich würde einfach alle zwei Datumsangaben als einen Bereich in der Reihenfolge gruppieren, die der Benutzer auswählt. Wenn dann ein Datum aus einem beliebigen Bereich entfernt wird, wird der gesamte Bereich entfernt (das hier nicht codiert ist, Sie müssen das hinzufügen).

Hier ist mein 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>

Und hier ist eine Geige: http://jsfiddle.net/gydL0epa/

0
lax1089