2012-07-18 3 views
0

내 HTML에는 두 개의 서로 다른 div에 두 개의 다른 날짜 표시기가 있습니다.jQuery 선택기가 jquery-mobile datepicker와 잘 작동하지 않습니다.

$('#details1 tr .ui-body-c').on('click', function(){ 
    $('#details1 .hasDatepicker').hide(); 
    if($('#date1').val()!="") 
    { 
     var day=new Date($('#date1').val()); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
}); 

하지만 클릭 이벤트를 트리거하지 않는 일에 클릭이처럼 날짜 선택기에서 일을 선택할 때 내가 뭔가를하고 싶어. 선택기에서 # details1을 제거하면 이벤트가 트리거되지만 둘 다 datepicker가 발생합니다. http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

편집 :

다음은 날짜 선택기 플러그인에 대한 링크의 테이블 JQuery와 모바일 날짜 선택기가 페이지 내에서 감지되지 만듭니다 것으로 보인다. 심지어 시도 :

$('html tr .ui-body-c').on('click', function(){ 
    $('#details1 .hasDatepicker').hide(); 
    if($('#date1').val()!="") 
    { 
     var day=new Date($('#date1').val()); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
}); 

그리고 작동하지 않습니다. 또한 var a = $('.datepicker-calendar').parent()을 수행하여 []가 표시되었습니다.

왜 이런 일이 발생하고 어떻게 해결할 수 있을지에 대한 의견이 있으십니까?

답변

0

나는이 요소를 사용자 정의 클래스를 추가하여 jquery.ui.datepicker.mobile.js 파일을 편집하여이 문제를 해결했습니다.

:
if(options.altField!=undefined) 
    $(dp).attr('id', options.altField.split('#')[1] + '1'); 

그리고 내 날짜 입력의 ID가 "myDatePicker"클래스 "myDatePicker12"가됩니다 달력의 각 TD가 있고 경우 다음

$(".ui-datepicker-calendar td", dp).addClass("ui-body-c "+$(dp).attr('id')+'2'); 

function updateDatepicker(){에 그래서이 작업을 수행 할 수 있습니다

$('.myDatePicker12').on('click', function(){ 
    $('#details1 .hasDatepicker').hide(); 
    if($('#date1').val()!="") 
    { 
     var day=new Date($('#date1').val()); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
}); 
1

편집 : 내 사과, 나는 datepicker의 모바일 버전이 무엇을하는지 자세히 살펴 봐야했습니다. 날짜 선택기의 모바일 버전이 같은 경우

$('#details1').on('click', 'tr .ui-body-c', function(){ 

: 귀하의 문제는 나중에 DOM에 테이블을 추가하는, 당신이 뭔가 정적 예에서 이벤트를 위임해야합니다 때문에 가능성이 높습니다 어떤

$('#details1').datepicker({ 
    onSelect: function(dateText, inst) { 
     inst.input.hide(); 
     var day=new Date(dateText); 
     day.setHours(23); 
     day.setMinutes(59); 
     day.setSeconds(59); 

     getDayData(day); 
    } 
});​ 
당신이 일을 선택할 때이 이벤트가 발생

이 dateText가 입력에 투입 할 값입니다 (: 당신이 먼저 초기화 할 때 일반 jQuery를 UI 당신은 같은 뭔가 onSelect를 이벤트를 사용하여 더 나을 것 직접 가져와야 함) inst는 t를 포함하는 datepicker 인스턴스입니다. 그는 문제의 입력 (inst.input).

+0

이것은 작동하지 않습니다. 페이지가 jquery-mobile datepicker 스크립트를로드하면 각 입력 유형 = "date"에 datepicker가 생성됩니다. 그것은 테이블이있는 중첩 된 div이며, 클릭 이벤트를 바인드하여 클릭 한 날짜를 선택하므로 .datepicker 메소드가 작동하지 않습니다. – mornaner

+0

좋아, 그건 좀 짜증나. 마크 업을 올리시겠습니까? – Tjkoopa

+0

# details1은 해당 페이지의 래퍼 div입니다. 또한 다른 div와 함께 테이블에 가깝지만 아무 것도 얻지 못했습니다. – mornaner

관련 문제