web-dev-qa-db-fra.com

jQuery UI Datepicker - Sélections de dates multiples

Existe-t-il un moyen d'utiliser le widget Datepicker de l'interface utilisateur jQuery pour sélectionner plusieurs dates?

Toute aide est appréciée! Si vous ne pouvez pas utiliser l’interface utilisateur jquery datepicker, y at-il quelque chose de similaire qui le fait?

jqueryjquery-uidatepicker
38
tarnfeld

J'avais besoin de faire la même chose, donc j'ai écrit du JavaScript pour l'activer, 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.
J'ai utilisé ce code comme base.

<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

Avec l'agenda jQuery UI, ce plugin vous permet de choisir plusieurs dates: 

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

15
Dinaraj

Lorsque vous le modifiez un peu, cela fonctionne quel que soit le format de date que vous avez défini.

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

J'ai maintenant passé pas mal de temps à essayer de trouver un bon sélecteur de date prenant en charge les plages d'intervalles, et j'ai finalement trouvé celui-ci:

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

Je pense que c’est peut-être le meilleur sélecteur de date jQuery pour la sélection d’une plage ou de plusieurs dates, et il est prétendu avoir été la base du datepicker de jQuery UI. aussi bien documenté!

10
user310457

utiliser ceci sur:

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

Juste eu une exigence pour cela; voici le code que j'ai utilisé. Appliquez-le à une entrée comme d'habitude, j'utilise la classe typeof__multidatepicker.

Il maintient une liste de dates uniques dans la zone de texte du propriétaire. Vous pouvez également taper ici, ce n'est pas validé - le serveur doit évidemment vérifier la liste résultante!

J'ai essayé de le faire fonctionner avec la zone de texte liée du datepicker mais cela a échoué. Il crée donc une entrée invisible pour le datepicker (cela ne semble pas fonctionner avec display:none, d'où le style impair).

Il est positionné sur l'entrée principale pour que le sélecteur de date apparaisse au bon endroit et mesure 1px en largeur afin que vous puissiez toujours taper dans la zone de texte principale.

C'est pour un intranet avec une plate-forme fixe, donc je n'ai pas fait beaucoup de tests sur plusieurs navigateurs.

N'oubliez pas d'inclure le gestionnaire dans la variable body ou cela fonctionnera de manière confuse.

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

NOTE: Vous pouvez pré-remplir days avec une liste de dates comme '20190101' avec un morceau de code en PHP.

Ajoutez 2 lignes à votre CSS:

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

Pour obtenir la liste des jours sélectionnés par le calendrier dans un <form>:

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

Ajoutez ceci au <script>:

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

Appliquez implode sur la chaîne dans $_POST['calendar_days'] et mappez strtotime à toutes les dates formatées.

0
frasq

Utilisez ce pluginhttp://multidatespickr.sourceforge.net

  • Sélectionnez des plages de dates. 
  • Choisissez plusieurs dates qui ne sont pas en cours. 
  • Définissez un nombre maximum de dates sélectionnables. 
  • Définissez une plage X jours à partir de laquelle il est possible de sélectionner des dates Y. Définir les dates indisponibles
0
Eslam Sameh Ahmed