Question

有没有办法使用jQuery UI Datepicker小部件来选择多个日期？

感谢所有帮助！如果它不能使用jquery UI datepicker，那么有类似的吗？

Answer 1

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

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

Answer 2

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

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

Answer 3

当您稍微修改它时，无论您设置的是哪个日期格式，它都能正常工作。

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

Answer 4

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

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

我相信这可能是选择范围或多个日期的最佳jquery日期选择器，据称它是jQuery UI datepicker的基础，我认为没有理由怀疑，因为它似乎真的功能强大，而且记录良好！

Answer 5

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

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

对于那些寻找此修复程序的人来说，这是：

首先，您需要patch jquery.ui.multidatespicker.js。我已经提交了pull request on github。您可以使用它直到dubrox将其与主服务器合并，或者提供他自己的修复程序。
用法非常简单。以下代码会导致日期选择器在选择了指定的日期（maxPicks）后不选择任何日期。如果取消选择之前选择的任何日期，则会再次选择该日期，直到再次达到限制为止。

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

Answer 6

http://t1m0n.name/air-datepicker/docs/？我已经尝试了多种日期选择器的几种方法，但只有这种方法有效

Answer 7

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

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

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

它位于主输入上方，因此日期选择器显示在正确的位置，宽度为1像素，因此您仍然可以键入主文本框。

这是一个固定平台的内部网，所以我没有进行太多的跨浏览器测试。

请记住在body上包含处理程序，否则会令人困惑。

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

Answer 8

使用此plugin http://multidatespickr.sourceforge.net

选择日期范围。
选择多个日期而不是保证。
定义可选日期的最大数量。
定义X天的范围可以选择Y日期。定义不可用日期

Answer 9

使用它：

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

Answer 10

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

注意：您可以在days之类的日期列表中预填充'20190101'，并用PHP编写一段代码。

在CSS中添加2行：

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

要获取日历在<form>中选择的日期列表：

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

将此添加到<script>：

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

在implode中的字符串上应用$_POST['calendar_days']并将strtotime映射到所有格式化的日期。

jQuery UI Datepicker - 多个日期选择

10 个答案: