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 datepicker，那么是否有类似的东西？

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

推荐答案

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

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