2014-02-08 2 views
1

날짜 선택 도구 인 jquery입니다. 잘 작동하지만 이전 달 또는 다음 달 아이콘은 이미지에 표시된대로 표시되지 않습니다. 그러나 그림없는 영역을 클릭 할 때도 작동합니다.JQuery 날짜 시간 선택기 레이아웃 형식 문제

이미지와 같이 모서리에 이미지를 표시해야합니다. 어디에 문제가

나는 http://trentrichardson.com/examples/timepicker/

enter image description here 에서 다운로드 ... 제안 해주십시오 내 코드 :

  <link rel="stylesheet" href="css/jquery-ui.css"> 
    <style> 
    /* css for timepicker */ 
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } 
.ui-timepicker-div dl { text-align: left; } 
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; } 
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; } 
.ui-timepicker-div td { font-size: 90%; } 
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } 

.ui-timepicker-rtl{ direction: rtl; } 
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } 
.ui-timepicker-rtl dl dt{ float: right; clear: right; } 
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; } 
    </style> 

    <script src="js/jquery-1.9.1.js"></script> 
      <script src="js/1.10.3/jquery-ui.js"></script> 
     <script src="js/jquery-ui-timepicker-addon.js"></script>   
      <script> 

$(function() { 


    $("#datepicker").datetimepicker({dateFormat: "yy-mm-dd"}); 
    }); 

    </script> 
+0

데모에서와 같이 데이터 핸들러 "prev"와 "next"를 생성합니까? http://prntscr.com/2qorzh 그렇다면 CSS 속성을 확인하십시오. 그렇다면 CSS가 아닌 JS를 조사해야합니다. – Nix

+0

div는 어디에 배치해야합니까? 이미 스타일이 정의되어 있습니다 ... – logan

+1

음, 그 버튼을 채우기로되어 있습니다. 자, 내가 만든이 jsfiddle을보십시오 - http://jsfiddle.net/uDEHB/ 그리고이 스크린 샷을보십시오 - http://prntscr.com/2qwem6 코드에 코드가 있는지 확인하십시오. – Nix

답변

1

기회는 당신이 jQuery를 UI 이미지 리소스를 포함하는 것을 잊었다 있습니다. 브라우저 개발 도구를 열고 콘솔로 이동하십시오 (적어도 Chrome에서는 누락 된 리소스에 대한 404 오류 메시지가 표시됨).

당신은 여기에서 전체 jQuery를 UI 패키지를 다운로드해야합니다 http://jqueryui.com/download/

참고 또한 아이콘 외에, 당신은 각각의 날짜 또는 헤더의 그라데이션 배경을 표시되지 않는 것이다.

+0

콘솔에 404 오류 메시지가 없습니다. 그 빈 ... 또한 나는 이미 당신이 제공 한 링크에서 다운로드 한 버전의 축소 버전을 사용하고 있습니다 ... – logan

+0

당신의 대답은 내 문제를 찾아 해결하는 데 도움이되었습니다. 그래서 나는 아래에 답을 썼다. –

0

필자의 경우 잘못된 글꼴 굉장한 클래스 때문에 문제가 발생했습니다. 내 날짜 선택기 관련의 .js 파일을 확인, 나는 발견과 같은 화살표 :

<i class="icon-circle-arrow-left"></i> 

<i class="icon-circle-arrow-right"></i> 
그들은 변경해야합니다

:

<i class="fa fa-arrow-circle-left" aria-hidden="true"></i> 

<i class="fa fa-arrow-circle-right" aria-hidden="true"></i> 

그래서 d 모두 올바른 것으로 교체하십시오. 그것이 당신을 위해 또한 바란다.