jQuery UI datepicker - 캘린더 아래에 정적 텍스트를 추가 하시겠습니까?

Question

이것은 연결된 입력 요소를 클릭하면 나타나는 팝업 메뉴에 있습니다. 사용자가 다른 달로 스크롤하는 경우에도 표시되고 유지되는 날짜 테이블 아래에 정적 텍스트를 삽입 할 수 있기를 원합니다.

은 내가 .ui-datepicker 클래스에

$('.ui-datepicker').after('text'); 

를 사용하여 jQuery를 함께하여 작업을 얻는 제압했습니다. 문제는 사용자가 다음 달로 스크롤했을 때 작동하지 않는다는 것입니다. 나는 또한 그 문제를 해결하기 위해 끊임없이 텍스트를 삭제하고 다시 입력하여 setTimeout으로 수정했습니다. 그것은 정말 해키지만 일했습니다.

다음 문제는 페이지에 여러 개의 텍스트가있는 여러 개의 캘린더가있는 경우입니다. 위의 메서드를 사용하여 .ui-datepicker의 특정 인스턴스를 대상으로 시도했지만 사실은 페이지의 모든 일정 필드간에 공유되는 datepicker 인스턴스가 하나만 있음을 발견했습니다.

실제로 가능한가?

Answer 1

datepicker의 인스턴스를 보유 할 변수를 만들어야합니다. 당신이 그것을 만들 때,이 작업을 수행 : 같은 페이지에 여러 datepickers에 다른 텍스트를 표시하기위한

var myDatePicker = $("#myDatePickerElement").datepicker(); 
myDatePicker.after("text"); 

Answer 2

하나의 솔루션으로 각 날짜 선택기 위치의 ID/클래스 공간 옆에 데이터 홀더를 만드는 것입니다. 그런 다음 (this)를 사용하여 선택한 datepicker에 대한 데이터 내용을로드하십시오.

예 HTML 코드 : 선택에이어서 JQuery와 텍스트 주입 :

<p>Date1: <input type="text" class="datepicker" 
      data-dptxt="the text1 to display in datepicker" ></p> 

<p>Date2: <input type="text" class="datepicker" 
      data-dptxt="the Second text to display" ></p> 

예 jQuery 코드 : 데이터 소유자가 특정 텍스트를 포함 그래서 같은 연관된 날짜 선택기 표시 될 datepicker 캘린더는 다음과 같습니다.

$(".datepicker").datepicker() 
    .on("click", function() { 
     var dTxt = $(this).data('dptxt'); 
    $('.ui-datepicker-calendar').after('<span class="middle">'+dTxt+'</>'); 
}); 

약간의 CSS 형식을 추가했습니다. 두 개의 datepickers간에 변경되는 추가 세미 동적 텍스트를 쉽게 볼 수 있습니다.

행동에서 내 작업 jsFiddle 솔루션합니다 (jsFiddle 링크에서 아래 이미지 :

http://web-asylum.com/help-images/datepicker-extra-text-jquery0.jpg http://web-asylum.com/help-images/datepicker-extra-text-jquery.jpg