bootstrap3 Datetimepicker 작동이 안되네요.

Question

홈페이지에 나와있는 예제와 추가해야하는 라이브러리 그리고 제가 미리 추가해두었던 라이브러리 목록입니다.정상적으로 화면에는 보이고 버튼에 마우스오버를 하면 마우스 모양이 바뀌는데 막상 클릭 시아무 반응도 일어나질 않습니다.반응이 없는이유가 라이브러리의 충돌혹은 잘못된 참조 때문일까요 .? Import 부분 HTML 부분

javascript 부분

초코쪼꼬 · Accepted Answer

jquery가 2번 import된거 같고.. datetimepicker demo 받아서 돌려보니까 bootstrap이 import 된 뒤에 bootstrap-datetimepicker가 import되네요. 이렇게 변경해서 한번 해보세요.

nathak · Answer

크롬 또는 익스에서 개발자도구로 콘솔창에 오류 사항은 업서나요?

카카오톡 · Answer

&#64;nathak 현재 이클립스로 구동 중인데 Console 창에는 아무 반응도 없네요.DateTimepicker 가 그냥 아무 반응도 하지 않네요

nathak · Answer

이클립스 콘솔창이 아닌크롬또는 익스에 개발자도구를 확인 하셔야 합니다.

초코쪼꼬 · Answer

$('#datetimepicker6').datetimepicker 라고만 console창에 치면 module 정보 나와요?

카카오톡 · Answer

&#64;nathak 파이어폭스 콘솔창을보니 10:53:17.764 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:10010:53:17.764 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:15110:53:17.764 Unknown pseudo-class or pseudo-element '-webkit-inner-spin-button'. Ruleset ignored due to bad selector. bootstrap.css:15410:53:17.764 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:16110:53:17.764 Unknown pseudo-class or pseudo-element '-webkit-search-cancel-button'. Ruleset ignored due to bad selector. bootstrap.css:16410:53:17.764 Unknown property '-moz-osx-font-smoothing'. Declaration dropped. bootstrap.css:28310:53:17.764 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:106310:53:17.764 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:106910:53:17.764 Expected color but found 'auto'. Expected color but found '-webkit-focus-ring-color'. Expected end of value but found '-webkit-focus-ring-color'. Error in parsing value for 'outline'. Declaration dropped. bootstrap.css:110210:53:17.766 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:249710:53:17.766 Expected end of value but found '\9 '. Error in parsing value for 'margin-top'. Declaration dropped. bootstrap.css:250210:53:17.766 Expected color but found 'auto'. Expected color but found '-webkit-focus-ring-color'. Expected end of value but found '-webkit-focus-ring-color'. Error in parsing value for 'outline'. Declaration dropped. bootstrap.css:252010:53:17.766 Unknown pseudo-class or pseudo-element '-ms-input-placeholder'. Ruleset ignored due to bad selector. bootstrap.css:255810:53:17.766 Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'. Ruleset ignored due to bad selector. bootstrap.css:256110:53:17.766 Expected media feature name but found '-webkit-min-device-pixel-ratio'. bootstrap.css:257710:53:17.766 Expected end of value but found '\9 '. Error in parsing value for 'margin-top'. Declaration dropped. bootstrap.css:262810:53:17.766 Unknown property 'touch-action'. Declaration dropped. bootstrap.css:297810:53:17.766 Unknown property 'user-select'. Declaration dropped. bootstrap.css:298310:53:17.766 Expected color but found 'auto'. Expected color but found '-webkit-focus-ring-color'. Expected end of value but found '-webkit-focus-ring-color'. Error in parsing value for 'outline'. Declaration dropped. bootstrap.css:299510:53:17.766 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:301610:53:17.767 Expected 'none' or URL but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:347710:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:503010:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:503110:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:504610:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:504710:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:505410:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:505510:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:506210:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:506310:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:507010:53:17.768 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:507110:53:17.768 Unknown property 'zoom'. Declaration dropped. bootstrap.css:508310:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:568310:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:569110:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:576010:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:576410:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:583210:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:583610:53:17.769 Expected media feature name but found 'transform-3d'. bootstrap.css:606810:53:17.769 Expected media feature name but found '-webkit-transform-3d'. bootstrap.css:606810:53:17.769 Error in parsing value for 'perspective'. Declaration dropped. bootstrap.css:607710:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:613910:53:17.769 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:614310:53:17.769 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:614410:53:17.769 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:614510:53:17.769 Expected 'none' or URL but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:614710:53:17.769 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:615310:53:17.769 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:615410:53:17.769 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:615510:53:17.769 Expected 'none' or URL but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:615710:53:17.769 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:616410:53:17.769 Expected end of value but found '\9 '. Error in parsing value for 'background-color'. Declaration dropped. bootstrap.css:621910:53:17.850 ReferenceError: jQuery is not defined bootstrap-datetimepicker.min.js:2910:53:17.854 SyntaxError: Using //&#64; to indicate source map URL pragmas is deprecated. Use //# instead jquery.min.js:410:53:23.935 Unknown property 'box-sizing'. Declaration dropped. Alarm.jsp10:53:23.938 TypeError: $(...).datetimepicker is not a function 라는에러가 떠있네요

카카오톡 · Answer

&#64;초코쪼꼬undefined 라고뜨네요

카카오톡 · Answer

@초코쪼꼬 이렇게 jquery2번 import 된것 지우고 bootstrap을 위로 올렸는데도 이런에러가뜨네요 TypeError: e.element.find(...).size is not a function bootstrap-datetimepicker.min.js:2911:18:47.276 "Deprecation warning: moment.lang is deprecated. Use moment.locale instead." moment-with-locales.min.js:611:18:47.276 "jQuery.Deferred exception: e.element.find(...).size is not a function" "f/ct@https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js:29f@https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js:29n.fn.datetimepicker/<@https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js:29.each@https://code.jquery.com/jquery-3.1.1.min.js:2r.prototype.each@https://code.jquery.com/jquery-3.1.1.min.js:2n.fn.datetimepicker@https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js:29@http://localhost:8080/MicroPMS/JSP/Alarm.jsp:147g/

초코쪼꼬 · Answer

&#64;낚시 해당 bootstrap-datetimepicker.min.js 를 받아서 확인해보니.. 정식사이트에서 내려받은거랑은 차이가 좀 많이나네요.. 정식 사이트에서 js파일을 내려받아서 그걸 import해서 쓰세요.

카카오톡 · Answer

@초코쪼꼬답변 감사합니다 데모를 확인해보니 제가 등록한 제이쿼리 부분에서 Datetimepicker를 못찾더라구요.이걸 추가해주었고 나머지 부분도 바꿔줬더니 정상 작동 하네요.근데 제이쿼리를 두가를 임포트 하게 되면 어떠한 충돌이나나요 ? 현재 이렇게 두개가 추가되어있습니다.

초코쪼꼬 · Answer

두개가 동시 import된다면.. 누구를 바라볼거 같나요? 상위버전에는 지원하는 함수가 하위버전에는 없을때 그함수를 써야된다면.. 누구를 가르키고 함수를 쓸까요? 정상적인 모양은 아니겠지요. --추가개발할때 사용환경은 단일화를 해야합니다. a나 b를 둘다쓰는 케이스는 없죠. 새로 커스텀을 하더라도 한개로만 가야합니다.

bootstrap3 Datetimepicker 작동이 안되네요.

11개의 답변

#datetimepicker 목록