jQuery UI Datepicker-sélections de dates multiples

j'avais besoin de faire la même chose, donc j'ai écrit du JavaScript pour activer ceci, en utilisant le onSelect et beforeShowDay événements. Il maintient son propre tableau de dates sélectionnées, donc malheureusement ne s'intègre pas avec une boîte de texte montrant la date courante, etc. Je l'utilise juste comme un contrôle en ligne, et je peux alors interroger le tableau pour les dates actuellement 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>

avec jQuery UI calendar, ce plugin vous permet de choisir plusieurs dates:

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

quand vous le modifiez un peu, il fonctionne indépendamment de la date que vous avez définie.

$("#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, ""];
                        }
                    });     

j'ai maintenant passé pas mal de temps à essayer de trouver un bon cueilleur de dattes qui supporte les intervalles, et j'ai finalement trouvé celui-ci:

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

je crois que ce peut être la meilleure jquery sélecteur de date pour la sélection d'une plage ou plusieurs dates, et on prétend avoir été la base pour le jQuery UI datepicker, et je ne vois aucune raison de douter que, depuis, il semble être très puissant, et aussi bien documenté !

le plugin développé par @dubrox est très léger et fonctionne presque identique à jQuery UI. Mon exigence était d'avoir la possibilité de restreindre le nombre de dates sélectionnées.

Intuitivement, le maxPicks la propriété semble avoir été fournie dans ce but, mais cela ne fonctionne pas malheureusement.

Pour ceux d'entre vous qui recherchent ce correctif, c'est ici:

1. tout d'Abord, vous devez vous patchjquery.ui.multidatespicker.js. Je ont soumis un pull request sur github. Vous pouvez l'utiliser jusqu'à ce dubrox fusionne avec le maître ou un correctif de son propre.

2. l'Utilisation est vraiment simple. Le code ci-dessous fait en sorte que le sélectionneur de date ne sélectionne aucune date une fois le nombre de dates spécifié (maxPicks) a déjà été sélectionné. Si vous désélectionnez une date déjà sélectionnée, il vous permettra de sélectionner à nouveau jusqu'à ce que vous atteigniez la limite une fois encore.

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

Juste eu une exigence pour cela, voici le code que j'ai utilisé. L'appliquer à une entrée comme d'habitude, je suis à l'aide de la classe typeof__multidatepicker.

il maintient une liste de dates uniques dans la boîte de texte du propriétaire. Vous pouvez aussi taper là, ce n'est pas validé - évidemment le serveur doit vérifier la liste résultante!

j'ai essayé de le faire fonctionner avec la boîte de texte liée du lecteur de données mais j'ai échoué, donc il crée une entrée invisible pour le lecteur de données (il ne semble pas fonctionner avec display:none, d'où l'étrange style).

il est positionné sur l'entrée principale de sorte que le curseur de données apparaît à la bonne place, et est 1px dans la largeur de sorte que vous pouvez toujours taper dans la boîte de texte principale.

c'est pour un intranet avec une plate-forme fixe donc je n'ai pas fait beaucoup de tests de navigation croisée.

n'oubliez pas d'inclure le gestionnaire sur l' body ou il travaille point de prêter à confusion.

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

utilisez ceci plugin http://multidatespickr.sourceforge.net

• sélectionnez les plages de dates.
• choisir plusieurs dates qui ne sont pas en sécurité.
• définir un nombre maximum de dates à choisir.
• définir une plage X jours à partir de l'endroit où il il est possible de sélectionner Y dates. Définir les dates non disponibles

utiliser ceci:

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