【问题标题】:How do I Implement Custom Functionality After the Month is Changed?更改月份后如何实现自定义功能?
【发布时间】:2011-02-28 21:44:44
【问题描述】:

我使用 jQuery datepicker 作为内联日历,用于过滤页面上的数据。我使用 jQuery 选择器将日期链接重写为真正的超链接,而不是正常的发布事件。

所以如果我在页面http://mysite.com/mypage,超链接将是http://mysite.com/mypage/2011-1-1http://mysite.com/mypage/2011-1-2等。

所以我有一个日期选择器

$(function () {
    $('.calendar').datepicker({
        showOtherMonths: false
    });
    configureCalendarLinks();
});   

还有一些修改链接的代码:

    configureCalendarLinks = function (calendarId) {
        calendarId = calendarId || '';

        var calendarIdSelector = calendarId != '' ? '#' + calendarId + ' ' : '';
        var rootUrl = getShowRootUrl(location.href);

        $(calendarIdSelector + 'a.ui-state-default').attr('href',
            function () {
                var url = rootUrl + .getFullDate($(this).text(), calendarId));
                return url;
            });
    };

getFullDate = function (date, calendarId) {
    calendarId = calendarId || '';
    var dDate;
    if (calendarId == '')
        dDate = new Date(getDatePickerCalendarYear(), getDatePickerCalendarMonth(), date);
    else
        var dDate = new Date(getDatePickerCalendarYear(calendarId), getDatePickerCalendarMonth(calendarId), date);

    return date;
};

getDatePickerCalendarYear = function (calendarId) {
    calendarId = calendarId || '';
    var calendarIdSelector = calendarId != '' ? '#' + calendarId + ' ' : '';
    var calendarYear = $(calendarIdSelector + '.ui-datepicker-year').eq(0).text();
    return calendarYear;
};

.getDatePickerCalendarMonth = function (calendarId) {
    calendarId = calendarId || '';
    var calendarIdSelector = calendarId != '' ? '#' + calendarId + ' ' : '';
    var monthNumber = getMonthNumber($(calendarIdSelector + '.ui-datepicker-month').eq(0).text());
    return monthNumber;
};

getMonthNumber = function (monthName) {
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var index = $.inArray(monthName, monthNames);
    return index;
};

在我更改月份之前一切正常。当使用 datePicker 更改月份时,如何让代码再次运行?我尝试使用 onChangeCalendar 和 onBeforeShow,但它们在日历更改之前触发,导致日期为空。

理想情况下,我想在 onAfterShow() 方法中重新运行 configureCalendarLinks,但没有这样的事情。有没有办法做到这一点?

谢谢

如果有一种简单、更好的不同方式来完成我正在尝试做的事情。 . .没关系,也是。

【问题讨论】:

    标签: jquery jquery-ui datepicker jquery-ui-datepicker


    【解决方案1】:

    这可能就是您要找的东西?

    onChangeMonthYear

    http://jqueryui.com/demos/datepicker/#event-onChangeMonthYear

    【讨论】:

    • 不幸的是,onChangeMonthYear() 在新月份之前触发并且它的单元格被渲染。
    • 如果月份元素具有唯一的 ID 或类名,您可以将更改事件绑定到它。 $('.ui-datepicker-month').bind('change', function(){});
    • 20
    • Seth,上面是单个元素日项目的样子。那是可以利用bind()的东西吗?
    • 你应该可以。这对于 .delegate 方法来说可能是一个很好的例子。 $('.ui-datepicker-calendar').delegate('.ui-state-default', 'click', function(){ console.log($(this); }); - console.log您点击的元素。
    猜你喜欢
    • 1970-01-01
    • 2019-04-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-01
    • 2018-04-09
    相关资源
    最近更新 更多