jQuery UI Datepicker - 多个日期选择 [英] jQuery UI Datepicker - Multiple Date Selections

问题描述

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

Is there a way to use the jQuery UI Datepicker widget to select multiple dates?

感谢所有帮助！如果无法使用 jquery UI 日期选择器，那么是否有类似的功能?

All help is appreciated! If its not possible to use the jquery UI datepicker then is there something similar that does?

推荐答案

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

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.

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

这篇关于jQuery UI Datepicker - 多个日期选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！