32  

I needed to do the same thing, so have written some JavaScript to enable this, using the onSelect and beforeShowDay events. It maintains its own array of selected dates, so unfortunately doesn't integrate with a textbox showing the current date, etc. I'm just using it as an inline control, and I can then query the array for the currently selected dates.
I used this code as a basis.

我需要做同样的事情，所以使用onSelect和beforeShowDay事件编写了一些JavaScript来启用它。它维护自己的选定日期数组，所以很遗憾没有与显示当前日期等的文本框集成。我只是将它用作内联控件，然后我可以查询数组中当前选择的日期。我用这个代码作为基础。

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

14  

With jQuery UI calendar, this plugin allows you to pick multiple dates :

使用jQuery UI日历，此插件允许您选择多个日期：

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

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

12  

When you modifiy it a little, it works regardless which dateFormat you have set.

当你稍微修改它时，无论你设置了哪个dateFormat，它都能正常工作。

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

10  

I have now spent quite some time trying to find a good date picker that support interval ranges, and eventually found this one:

我现在花了很多时间试图找到一个支持间隔范围的好日期选择器，并最终找到了这个：

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

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

I believe this may be the best jquery date picker for selecting a range or multiple dates, and it is claimed to have been the base for the jQuery UI datepicker, and I see no reason to doubt that since it seems to be really powerful, and also good documented !

我相信这可能是用于选择范围或多个日期的最佳jquery日期选择器，并且据称它是jQuery UI datepicker的基础，我认为没有理由怀疑它因为它看起来真的很强大，并且也很好记录！

1  

The plugin developed by @dubrox is very lightweight and works almost identical to jQuery UI. My requirement was to have the ability to restrict the number of dates selected.

由@dubrox开发的插件非常轻量级，与jQuery UI几乎完全相同。我的要求是能够限制所选日期的数量。

Intuitively, the maxPicks property seems to have been provided for this purpose, but it doesn't work unfortunately.

直观地说，似乎已经为此目的提供了maxPicks属性，但遗憾的是它不起作用。

For those of you looking for this fix, here it is:

对于那些寻找此修复的人，这里是：

1. First up, you need to patch jquery.ui.multidatespicker.js. I have submitted a pull request on github. You can use that until dubrox merges it with the master or comes up with a fix of his own.

   首先，您需要修补jquery.ui.multidatespicker.js。我已经在github上提交了一个pull请求。您可以使用它直到dubrox将其与主服务器合并，或者提供他自己的修复程序。

2. Usage is really straightforward. The below code causes the date picker to not select any dates once the specified number of dates (maxPicks) has been already selected. If you unselect any previously selected date, it will let you select again until you reach the limit once again.

   用法非常简单。下面的代码会导致日期选择器在选择了指定的日期（maxPicks）后不选择任何日期。如果取消选择之前选择的任何日期，则会再次选择该日期，直到再次达到限制为止。

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

   $（“＃mydatefield”）。multiDatesPicker（{maxPicks：3}）;

0  

Just had a requirement for this; here is the code I used. Apply it to an input as normal, I am using the class typeof__multidatepicker.

刚要求这个;这是我用过的代码。正常地将它应用于输入，我使用类typeof__multidatepicker。

It maintains a list of unique dates in the owner textbox. You can also type in there, this is not validated - obviously the server needs to check the resulting list!

它在所有者文本框中维护一个唯一日期列表。你也可以输入，这是未经验证的 - 显然服务器需要检查结果列表！

I tried to get it to work with the datepicker's linked textbox but failed, so it creates an invisible input for the datepicker (it doesn't seem to work with display:none, hence the odd styling).

我试图让它与datepicker的链接文本框一起使用但是失败了，所以它为datepicker创建了一个不可见的输入（它似乎不适用于display：none，因此是奇怪的样式）。

It is positioned over the main input so the datepicker appears in the correct place, and is 1px in width so you can still type into the main textbox.

它位于主输入上方，因此datepicker出现在正确的位置，宽度为1px，因此您仍然可以键入主文本框。

It's for an intranet with a fixed platform so I haven't done much cross-browser testing.

它适用于具有固定平台的Intranet，因此我没有进行太多的跨浏览器测试。

Remember to include the handler on the body or it works confusingly.

请记住将处理程序包含在正文中，否则会令人困惑。

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

Use this plugin http://multidatespickr.sourceforge.net

使用此插件http://multidatespickr.sourceforge.net

• Select date ranges.
• 选择日期范围。
• Pick multiple dates not in secuence.
• 选择多个日期而不是保证。
• Define a maximum number of pickable dates.
• 定义可选日期的最大数量。
• Define a range X days from where it is possible to select Y dates. Define unavailable dates
• 定义从可以选择Y日期的X天的范围。定义不可用日期

0  

use this on:

使用此：

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