jQuery ui datepicker问题 [英] jQuery ui datepicker questions

问题描述

我有两个文本字段，从，到.这里我想用两个字段来做很多事情.

I am having two text fields From, To.Here i want to do many things with is two fields.

1. 我想在选定的日期选择接下来的三天.这意味着，如果我在 From 字段中选择jan 1,2012，然后选择 To 字段应自动选择jan 1,2,3 2012.
2. 我在jan 1上处于悬停时，应突出显示jan 1,2,3
3. 在jan 1上我选择时，应该在 10天后将其禁用(在jan 10之后应禁用所有日期)
4. 假设我已禁用 jan 2的意思.当我选择jan 1工具提示消息时，应该说您不能选择这些日期.

1. I want to select next three days on selected date.Which means,if I am selecting jan 1,2012 in From field , then To field should automatically select jan 1,2,3 2012.
2. While I am hover on jan 1, It should highlight jan 1,2,3
3. While I am selecting on jan 1 it should it disable after 10 days (after jan 10 all dates should disabled)
4. Suppose I disabled jan 2 means.While I am selecting jan 1 tool tip message should say you can't select these dates.

请参考一下哪些功能用于执行此操作.如果您有这些功能的示例代码，请分享.这将是非常有帮助的.

Give me the reference idea which functions are used to do this.If you have example code for any of these please share.It will be very help full.

这是我的设置

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





    }
});

预先感谢

推荐答案

这不是一个完整的答案，但我 一起砍东西 ，希望可以帮助您入门.它满足您的某些要求，但悬停突出显示并不完美(有时会突出显示额外的日期)，并且我对所有JavaScript Date对象都不满意，因此可能需要进行一些优化.该代码包括在下面:

It's not a complete answer but I've hacked something together which should hopefully get you started. It meets some of your requirements but the hover highlighting is not perfect (sometimes extra dates are left highlighted) and I'm not happy with all of the JavaScript Date objects so there is probably some optimisation to be done. The code is included below:

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主题和

Note that the demo jsFiddle also includes a jQueryUI Theme and the Multiple Dates Picker plugin as advised by @diEcho

这篇关于jQuery ui datepicker问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！