jQuery ui datepicker问题

Question

我有两个文字字段From，To.Here我想用两个字段做很多事情。

1. 我想在所选日期选择接下来的三天。这意味着，如果我在 From 字段中选择jan 1,2012，那么 To < / em>字段应自动选择jan 1,2,3 2012。
2. 当我jan 1上悬停时，应该突出显示jan 1,2,3
3. 当我在jan 1上选择时，应该在 10天后禁用（在jan 10所有日期都被禁用后）
4. 假设我已停用 jan 2表示。虽然我选择jan 1工具提示消息应该说您无法选择这些日期。

告诉我哪些功能用于执行此操作。如果您有任何这些示例代码，请分享。这将非常有用。

这是我的设置

var dates = jQuery("#From,#To").datepicker({
    beforeShowDay: excludeDates,
    showButtonPanel: true,
    dateFormat: "m/d/y",
    altFormat: 'yy-mm-dd',
    minDate: 0,
    onSelect: function(selectedDate, inst) {
        var option = this.id == "From" ? "minDate" : "maxDate",
            instance = jQuery(this).data("datepicker"),
            date = jQuery.datepicker.parseDate(instance.settings.dateFormat || jQuery.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);

        var d = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        var mydate = jQuery.datepicker.formatDate('yy-mm-dd', d);





    }
});

提前致谢

Answer 1

这不是一个完整的答案，但我hacked something together应该有希望让你开始。它符合您的一些要求，但悬停突出显示并不完美（有时会突出显示额外的日期），我对所有JavaScript Date对象都不满意，因此可能需要进行一些优化。代码包含在下面：

HTML

From:<div id="fromDate"></div>
To:<div id="toDate"></div>

CSS

body {
    margin:10px 0 0 5px;
    font-family:Verdana;
    font-size:.8em;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background: #743620 none; /* a color that fits the widget theme */
    color: white; /* a color that is readeable with the color above */
}

的JavaScript

$('#fromDate').datepicker({
    onSelect: function(dateText, inst) {
        // set range <selected, +10d> on toDate
        var minDate = $(this).datepicker('getDate');
        var maxDate = new Date(minDate);
        maxDate.setDate(maxDate.getDate() + 9);

        var plusOne = new Date(minDate);
        plusOne.setDate(minDate.getDate() + 1);
        var plusTwo = new Date(minDate);
        plusTwo.setDate(minDate.getDate() + 2);
        var nowPlusThree = [minDate, plusOne, plusTwo];

        $('#toDate').datepicker('destroy').multiDatesPicker({minDate: minDate, maxDate:maxDate, 'addDates': nowPlusThree});

        $('#fromDate').off('hover', 'a');
    }
});

$('#toDate').datepicker();

$('#fromDate').on('hover', 'a', function() {
    var hoveredDate = new Date($('#fromDate .ui-datepicker-month').text() + ' ' + $(this).text() + ' ' + $('#fromDate .ui-datepicker-year').text());

    var plusOne = new Date(hoveredDate);
    plusOne.setDate(hoveredDate.getDate() + 1);
    var plusTwo = new Date(hoveredDate);
    plusTwo.setDate(hoveredDate.getDate() + 2);
    var nowPlusThree = [hoveredDate, plusOne, plusTwo];

    var existingDates = $('#toDate').multiDatesPicker('getDates');
    $('#toDate').multiDatesPicker('removeDates', existingDates);
    $('#toDate').multiDatesPicker({'addDates': nowPlusThree});
});

请注意，演示jsFiddle还包括jQueryUI Theme和@diEcho建议的Multiple Dates Picker plugin

Answer 2

希望这个链接有用

multiple datepicker

这里是完整的 demo lists