2014-07-16 19 views
1

"부트 스트랩"된 사이트에 날짜 선택 도구를 추가하려고합니다. 미적 감각 때문에 DoJo 선택 도구 나 기본 선택 도구를 사용하지 않습니다. 여기에 내가 현재 사용하고있는 구성 요소는 다음과 같습니다부트 스트랩 날짜 선택 도구 XPages

  1. http://bootstrap4xpages.openntf.org/ => 설치하고 사용

  2. 부트 스트랩 날짜 선택 : http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=dd.mm.yyyy&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox => 이것은로의 .js 및 .CSS 파일을 대처하여 설치 데이터 베이스.

  3. 내가 마키의 블로그 항목을 읽어 (내가 생각하는 이해) 한 : http://xomino.com/2012/01/26/using-jquery-selectors-in-xpages/

내 문제를 내가 jQuery를 내 필드에 .datepicker 요소를 추가 할 수 없습니다 무슨 상관없이. Marky의 기능을 모두 시도해 보았습니다. 클래스 이름을 선택기로 사용하고 직접 입력했습니다. 아무도 내가 뭘 잘못하고 있는지 아이디어가 있습니까?

은 사전에 감사 우수 스

PS : O) 여기

코드입니다 :이 내가 jQuery를 사용하고 그래서 날 쉽게 부트 스트랩 처음 것을 추가하고 싶습니다 :

=================== xPage =================

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex" xmlns:xc="http://www.ibm.com/xsp/custom"> 
    <xp:this.resources> 
     <xp:script src="/bootstrap-datepicker.js" clientSide="true"></xp:script> 
     <xp:styleSheet href="/datepicker3.css"></xp:styleSheet> 
     <xp:script src="/jsTestBootstrap.js" clientSide="true"></xp:script> 
    </xp:this.resources> 
    <xp:panel 
     style="margin-left:10.0px;margin-right:10.0px;margin-top:10.0px;margin-bottom:10.0px"> 
     <xp:div> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <xp:label value="Select a date" id="label1" for="inputText1"></xp:label> 
        <xp:inputText id="inputText1" styleClass="jqDateField"> 
        </xp:inputText> 
       </div> 
      </div> 
     </xp:div> 
    </xp:panel> 
</xp:view> 

== =================== 그리고 여기에 내 고객 코드를 선택하십시오. 개발 ==============

$("#view\\:_id1\\:inputText1").datepicker({ 
    format: "dd.mm.yyyy" 
}); 

====================== 단부 ===== ========================================================================================================== ==

+1

이 게시물에서 X $ 함수를 사용해보십시오 : http://xomino.com/2012/03/09/x-reference-examples/ 그것은 매우 잘 작동하므로 코드는 x $ ("# {id : inputText1}")처럼 보입니다. datepicker ({format : "dd.mm.yyyy"}); –

+1

클래스 선택기를 사용해 보셨습니까? $ (".jqDateField") - classSelector를 사용하고 약간의 상처를 덜어 줌 날짜 선택 도구의 Z- 인덱스를 시도해 볼 수있는 또 다른 한 가지 - 생성되고 보이지 않는 것입니까? jQueryUI 날짜 선택 도구로 문제가 발생했는데 작동했지만 보이지 않았습니다. 선택기가 작동하는지 확인하려면 방화 광구를 사용하십시오. – MarkyRoden

+0

@MarkyRoden : 예, 클래스 선택기를 시도했지만 여전히 작동하지 않았습니다. 필드가 생성되고 표시됩니다! 오후 내내 방화 녀석을 보냈다. o) 직장 동료도 부트 스트랩과 AngularJS (맞춤법 검사)를 많이 보았다. 심지어 그는 내 실수를 발견하지 못했다. –

답변

2

모든 정보를 제공해 주셔서 감사합니다. Mark는 저에게 연락을했고 TeamViewer를 사용하여 문제를 해결했습니다. 거기에 여러 오류. 여기 간다 :

  1. 내가 마크에서의 X $ 코드를 보유하는 자바 스크립트 라이브러리 클라이언트 측 생성 -이 첫 번째 문제였다을 -> 나는 < script > 블록으로

  2. 내가 사용하고 그것을 포함하는 데 필요한 사용자가 문서에 서명 할 수 있도록 jSignature (http://hasselba.ch/blog/?p=934) - jSignature 추가시 jQuery 1.8.1 추가 - Bootstrap4XPages는 jQuery 1.8.2 -> 2 x를 설치합니다. jQuery는 셀렉터의 문제였습니다 (재미있게 jSignature는 여전히 효과가있었습니다).

이제 모든 도움을 얻으 실 수 있습니다.대단히 감사합니다 : O)

이 되세요 좋은 하루 우수 스

2

내 블로그 게시물 http://elstarit.nl/?p=118을 참조하십시오. 다른 하나를 사용하지만, 날짜 선택 도구와 시간 선택 도구가 하나 있기 때문에 많이 좋아합니다. 하지만 JQuery 문제로 되돌아갑니다. JQuery의 어떤 버전이 필요한지 아십니까? 지난 주 Bootstrap4XPages에서 JQuery 1.8.x가로드되고 플러그인에 최신 버전이 필요했기 때문에 벽에 머리를 두드렸다. Bootstrap4XPages와로드 된 JQuery를 혼자서 전환 한 후에 문제가 해결되었습니다.

+0

프랭크 입력 해 주셔서 감사합니다. 제 문제는 jQuery (즉, Mark의 x $ 함수)를 사용하여 DOM 요소를 선택할 수 없다는 것입니다. 코드가 x $ 함수를 사용하는 것과 매우 유사합니다. 영형( –