web-dev-qa-db-ger.com

jQuery UI Datepicker - Mehrere Datumsauswahl

Gibt es eine Möglichkeit, das Dateipicker-Widget der jQuery-Benutzeroberfläche zum Auswählen mehrerer Datumsangaben zu verwenden?

Alle Hilfe wird geschätzt! Wenn es nicht möglich ist, die Dateispicker-Benutzeroberfläche der Jquery zu verwenden, gibt es dann etwas Ähnliches, das dies tut?

38
tarnfeld

Ich musste dasselbe tun, also habe ich JavaScript geschrieben, um dies zu aktivieren, und zwar mit den onSelect- und beforeShowDay-Ereignissen. Es verfügt über ein eigenes Array ausgewählter Datumsangaben, daher kann es leider nicht in ein Textfeld integriert werden, in dem das aktuelle Datum usw. angezeigt wird. Ich verwende es nur als Inline-Steuerelement und kann dann das Array nach dem aktuell ausgewählten Datum abfragen.
Ich habe diesen Code als Basis verwendet.

<script type="text/javascript">
// 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>
32
Tevin

Mit dem jQuery UI-Kalender können Sie mit diesem Plugin mehrere Daten auswählen: 

http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

15
Dinaraj

Wenn Sie es ein wenig ändern, funktioniert es unabhängig von dem Datumsformat, das Sie eingestellt haben.

$("#datepicker").datepicker({
                        dateFormat: "@", // Unix timestamp
                        onSelect: function(dateText, inst){
                            addOrRemoveDate(dateText);
                        },
                        beforeShowDay: function(date){
                            var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates);
                            if (gotDate >= 0) {
                                return [false,"ui-state-highlight", "Event Name"];
                            }
                            return [true, ""];
                        }
                    });     
12
chriszero

Ich habe nun einige Zeit versucht, eine gute Datumsauswahl zu finden, die Intervallbereiche unterstützt, und schließlich diese gefunden:

http://keith-wood.name/datepick.html

Ich glaube, dies ist möglicherweise die beste Jquery-Datumsauswahl für die Auswahl eines Bereichs oder mehrerer Datumsangaben, und es wird behauptet, dass sie die Basis für das jQuery-UI-Datepicker war, und ich sehe keinen Grund, daran zu zweifeln, da es wirklich mächtig zu sein scheint auch gut dokumentiert!

10
user310457

Das von @dubrox entwickelte Plugin ist sehr leicht und funktioniert fast identisch mit der jQuery-Benutzeroberfläche. Meine Anforderung war es, die Anzahl der ausgewählten Daten einschränken zu können.

Intuitiv scheint die maxPicks -Eigenschaft für diesen Zweck bereitgestellt worden zu sein, funktioniert aber leider nicht.

Für diejenigen unter Ihnen, die nach diesem Fix suchen, hier ist es:

  1. Zuerst müssen Sie patch jquery.ui.multidatespicker.js. Ich habe eine Pull-Anfrage für Github eingereicht. Sie können das verwenden, bis Dubrox es mit dem Master zusammenführt oder eine eigene Korrektur einbringt.

  2. Die Verwendung ist sehr einfach. Der folgende Code bewirkt, dass die Datumsauswahl keine Daten auswählt, nachdem die angegebene Anzahl von Daten (maxPicks) bereits ausgewählt wurde. Wenn Sie ein zuvor ausgewähltes Datum abwählen, können Sie es erneut auswählen, bis Sie das Limit wieder erreichen.

    $("#mydatefield").multiDatesPicker({maxPicks: 3});

1
adarshr

benutze dies auf:

$('body').on('focus',".datumwaehlen", function(){
    $(this).datepicker({
        minDate: -20
    });
});
0
GerA

Hatte gerade eine Anforderung dafür; Hier ist der Code, den ich verwendet habe. Übernehmen Sie es wie üblich auf eine Eingabe. Ich verwende die Klasse typeof__multidatepicker.

Es enthält eine Liste eindeutiger Daten im Eigentümer-Textfeld. Sie können auch dort eintippen, dies wird nicht geprüft - der Server muss die Ergebnisliste natürlich überprüfen!

Ich habe versucht, es mit dem verknüpften Textfeld des Datumsauswahlers zu erreichen, schlug jedoch fehl, und erstellt daher eine unsichtbare Eingabe für das Datumsauswahlfeld (es scheint nicht mit display:none zu funktionieren, daher das ungerade Styling).

Es wird über der Haupteingabe positioniert, so dass der Datumsbereich an der richtigen Stelle angezeigt wird. Er ist 1 Pixel breit, sodass Sie immer noch in das Haupttextfeld eingeben können.

Es ist für ein Intranet mit fester Plattform, daher habe ich nicht viel Cross-Browser-Tests durchgeführt.

Denken Sie daran, den Handler in die body aufzunehmen, da dies verwirrend ist.

$('.typeof__multidatepicker').each(
    function()
    {
        var _this = $(this);                        

        var picker = $('<input tabindex="-1" style="position:absolute;opacity:0;width:1px" type="text"/>');

        picker.insertAfter(this)
        .position({my:'left top', at:'left top', of:this})
        .datepicker({
            beforeShow:
                function()
                {
                    _this.data('mdp-popped', true);
                },
            onClose: 
                function(dt, dpicker)
                {   
                    var date = $.datepicker.formatDate(picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate'));
                    var hash = {};
                    var curr = _this.val() ? _this.val().split(/\s*,\s*/) : [];
                    var a = [];

                    $.each(curr, 
                        function() 
                        { 
                            if(this != '' && !/^\s+$/.test(this)) 
                            {   
                                a.Push(this); 
                                hash[this] = true;
                            }
                        }
                    );

                    if(date && !hash[date])
                    {
                        a.Push(date);

                        _this.val(a.join(', '));
                    }                                                                   

                    _this.data('mdp-popped', false);
                    _this.data('mdp-justclosed', true);
                }
        }); 

        _this.on('focus', 
            function(e) 
            {                               
                if(!_this.data('mdp-popped') && !_this.data('mdp-justclosed'))
                    _this.next().datepicker('show'); 

                _this.data('mdp-justclosed', false);
            }
        );
    }
);

$('body').on('click', function(e) { $('.typeof__multidatepicker').data('mdp-justclosed', false); });
0
Whelkaholism
<div id="calendar"></div>
<script>
$(document).ready(function() {
    var days = [];

    $('#calendar').datepicker({
        dateFormat: 'yymmdd',
        showWeek: true, showOtherMonths: false, selectOtherMonths: false,
        navigationAsDateFormat: true, prevText: 'MM', nextText: 'MM',
        onSelect: function(d) {
            var i = $.inArray(d, days);

            if (i == -1)
                days.Push(d);
            else
                days.splice(i, 1);
        },
        beforeShowDay: function(d) {
            return ([true, $.inArray($.datepicker.formatDate('yymmdd', d), days) == -1 ? 'ui-state-free' : 'ui-state-busy']);
        }
    });
});
</script>

ANMERKUNG: Sie können days eine Liste mit Datumsangaben wie '20190101' mit einem Code in PHP vorbefüllen.

Fügen Sie Ihrem CSS 2 Zeilen hinzu:

#calendar .ui-state-busy a {background:#e6e6e6 !important;}
#calendar .ui-state-free a {background:none !important;}

So rufen Sie die Liste der vom Kalender ausgewählten Tage in einem <form> ab:

<div id="calendar"></div>
<form method="post">
<input type="submit" name="calendar_get" id="calendar_get" value="Validate" />
</form>

Fügen Sie dies dem <script> hinzu:

    $('#calendar_get').click(function() {
        $(this).append('<input type="hidden" name="calendar_days" value="' + days.join(',') + '" />');
    });

Wenden Sie implode auf die Zeichenfolge in $_POST['calendar_days'] an und ordnen Sie strtotime alle formatierten Daten zu.

0
frasq

Verwenden Sie dieses pluginhttp://multidatespickr.sourceforge.net

  • Datumsbereiche auswählen. 
  • Wählen Sie mehrere Daten aus, die nicht in Sicherheit sind. 
  • Definieren Sie eine maximale Anzahl von auswählbaren Daten. 
  • Definieren Sie einen Zeitraum von X Tagen, von dem aus Sie Y-Daten auswählen können. Definieren Sie nicht verfügbare Daten
0