2011-02-28 4 views
1

jQuery datepicker를 페이지의 데이터를 필터링하는 데 사용되는 인라인 캘린더로 사용하고 있습니다. 일반적인 포스트 이벤트 대신 jQuery 선택기를 사용하여 날짜 링크를 실제 하이퍼 링크로 다시 작성했습니다.월이 변경된 후 사용자 지정 기능을 구현하려면 어떻게합니까?

그래서 페이지 http://mysite.com/mypage에있어 경우, 하이퍼 링크는 http://mysite.com/mypage/2011-1-1, http://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를 다시 실행하고 싶습니다.하지만 그런 것은 없습니다. 이것을 할 수있는 방법이 있습니까?

감사

내가 할 노력하고있어 달성하기 쉬운, 더 나은 다른 방법이 있다면. . . 괜찮아.

답변

1

이것은 찾고 계신 것일 수 있습니다. onChangeMonthYear

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

+0

불행하게도, onChangeMonthYear()는 새로운 달 전에 화재와 세포 렌더링됩니다. – John

+0

month 요소에 고유 한 ID 또는 클래스 이름이 있으면 change 이벤트를 바인딩 할 수 있습니다. $ ('. ui-datepicker-month'). bind ('change', function() {}); – Seth

+0

20 John

관련 문제