2013-08-29 2 views
4

사이트가 있고 here is a link입니다. 텍스트 필드를 클릭하면 작동하는 DatePicker를 볼 수 있습니다. 하지만 iF를 클릭하면 mportFriend -> Add Manual Friend ->을 클릭 한 다음 생일 필드를 클릭하면 datepicker가 나타나지 않습니다. 나는 볼 수 있습니다. 필드에 방화범이 들려서 hasDatePicker 속성이 있습니다. 데이트 피커를 보여주지 않는 이유가 무엇인지, 감사를 도와 줄 수있는 사람이 누구입니까?DatePicker가 모달 내에서 작동하지 않습니다

+0

이벤트 위임을 살펴보면 ... – bluetoft

+0

@SmithSmithy - –

+0

@SmithSmithy - 기술적으로는 스크립트가 몸 끝에 있기 때문에 왜 필요하지 않습니까? 그런 문서 준비 함수 안에 스크립트를 넣는 것이 좋습니다. –

답변

8

@Bluetoft는 대답은 이벤트 위임이라고 말합니다. 당신의 날짜 선택기는 스크립트가 실행되는 시점에 존재하는 요소 에 바인딩되고 있기 때문에 그것은 당신을 위해 작동하지 않는 이유는

은 (생일 필드는 #datepicker는 다른 ID, 무슨이다가, 언급하지 않기 스크립트가에 바인딩됩니다).

동적으로 새 양식을 가져 오면 datepicker가 새 요소에 바인딩되지 않습니다.

$(function() { 
    $("body").delegate("#datepicker", "focusin", function(){ 
     $(this).datepicker(); 
    }); 
}); 

는 또한, 양식 "생일"입력은 그것의 또 다른 이유는 #fi_bday의 ID를 가지고 :

그래서 하나의 방법은, this answer에 따라,과 같이 스크립트를 구성하는 것입니다 묶여 있지 않다. 난 당신이 "날짜 선택기"의 종류와 날짜 선택기를 원하는 입력을 지정하는 것이 좋습니다 것, 다음 '.datepicker' 요소에 날짜 선택기 기능을 바인딩하는 스크립트를 변경 : 마지막으로

$(function() { 
    $("body").delegate(".datepicker", "focusin", function(){ 
     $(this).datepicker(); 
    }); 
}); 

, 당신이 '돈 경우 위의 더 나은 일반 클래스 메서드를 사용하려면 아래 선택자에서 두 개의 선택기를 사용할 수 있습니다. 물론 모달 윈도 요소 (들)에 대한 날짜 선택기에 결합하는 등의 방법으로 위임 아래있어서

C# .NET을 약
$(function() { 
    $("body").delegate("#datepicker, #fi_bday", "focusin", function(){ 
     $(this).datepicker(); 
    }); 
}); 
+0

fi_bday 필드에 datepicker를 추가하고 싶습니다. –

+0

@ ZainShah120 정확히 –

+0

@cale_b #datepicker에 datepicker 기능을 추가하십시오. 모달이로드되면 fi_bday에 추가하고 싶습니다. –

0

에서를 Page_Load에서 .ASPX

function getjqueryselect() { 
     $("#<%=this.txtBeginEdit.ClientID%>").datepicker($.datepicker.regional["th"]); 
     $("#<%=this.txtBeginEdit.ClientID%>").datepicker("setDate", new Date()); 
     $("#<%=this.txtEndEdit.ClientID%>").datepicker($.datepicker.regional["th"]); 
     $("#<%=this.txtEndEdit.ClientID%>").datepicker("setDate", new Date()); 
    } 

에서 다음 aspx.cs

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "test", "getjqueryselect();", true); 
4

위의 해결 방법은 저에게 적합하지 않았습니다.

날짜 선택 도구에는 z- 색인 속성이 없으므로 z- 색인이있는 모달/팝업에 표시되지 않았습니다. 날짜 선택 도구가 제대로 작동하고 있지만 모달 뒤에 표시되고 있음을 발견했습니다. 따라서 z-index 속성을 날짜 선택 도구 클래스에 추가했습니다.

.datepicker{ z-index:99999 !important; } 

그래서 내 솔루션을 다른 사용자와 공유하고 있습니다. 나는 이것이 누군가를 도울 것이라고 확신한다.

+1

좋아요! 이것은 잘 동작하고있다. – Jarla

관련 문제