jQuery UI Datepicker - 多个日期选择

Question

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

所有帮助表示赞赏!如果它不能使用jquery UI datepicker那么有类似的东西吗？

Answer 1

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

<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

当你稍微修改它时,无论你设置了哪个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, ""];
                        }
                    });     

Answer 3

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

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

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