Date Picker 사용하려고 하는데요
- 작성자 :
- 송*석
- 작성일 :
- 2013-01-30 18:15:07
- 조회수 :
- 1,999
- 구분 :
- 공통컴포넌트
- 진행상태 :
- 완료
Q
제공하신 eGovFrame 에서 Date picker를 사용하려고 했습니다.
그래서 html 문서의 head부분에
eGovFrame 홈페이지의 Overview 목록의 HTML5와 CSS3.0 기본활용 목록을 들어가서 사용자 경험(ux) 선언 복사하였습니다.
주소 : http://m.egovframe.go.kr/mguide/guide/template/interfaceHtml.do
선언 부분 :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.css"/>
<link rel="stylesheet" href="/css/egovframework/mbl/cmm/EgovMobile.css" />
<script src="/js/egovframework/mbl/cmm/jquery-1.6.2.min.js"></script>
<script src="/js/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.js"></script>
<script src="/js/egovframework/mbl/cmm/EgovMobile.js"></script>
이렇게 똑같이 복사하고
body 부분에는 UX Component에 Date Picker의 달력형태를 사용하려고
date picker
<div data-role="fieldcontain">
<label for="defandroid">Some Date</label>
<input name="mydate" id="defandroid" type="date" data-role="datebox" data-options='{"mode": "calbox"}' >
</div>
이 소스를 넣고 실행하였는데
그냥 <input type="date"> 를 넣은거랑 똑같이 나와서 혹시 다른 문서를 head에 추가하여야 하는지 따로 바뀐게 있는지 여쭤보려고 문의 올립니다..
그리고 추가 질문으로 여기에 물어봐도 되는지 모르겠는데요...
date는 기본적으로 년, 월, 일을 같이 선택하게 되었잇는데 선택하고 나중에 년, 월, 일로 쪼개서 사용할 수 있나요??
예를 들면 2013 - 1 - 30을 선택하고 나중에 임의로 변수 year, month, day를 지정하고 year에는 2013을 month에서 1을 day에는 30을 저장 할 수 있나요???
그래서 html 문서의 head부분에
eGovFrame 홈페이지의 Overview 목록의 HTML5와 CSS3.0 기본활용 목록을 들어가서 사용자 경험(ux) 선언 복사하였습니다.
주소 : http://m.egovframe.go.kr/mguide/guide/template/interfaceHtml.do
선언 부분 :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.css"/>
<link rel="stylesheet" href="/css/egovframework/mbl/cmm/EgovMobile.css" />
<script src="/js/egovframework/mbl/cmm/jquery-1.6.2.min.js"></script>
<script src="/js/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.js"></script>
<script src="/js/egovframework/mbl/cmm/EgovMobile.js"></script>
이렇게 똑같이 복사하고
body 부분에는 UX Component에 Date Picker의 달력형태를 사용하려고
date picker
<div data-role="fieldcontain">
<label for="defandroid">Some Date</label>
<input name="mydate" id="defandroid" type="date" data-role="datebox" data-options='{"mode": "calbox"}' >
</div>
이 소스를 넣고 실행하였는데
그냥 <input type="date"> 를 넣은거랑 똑같이 나와서 혹시 다른 문서를 head에 추가하여야 하는지 따로 바뀐게 있는지 여쭤보려고 문의 올립니다..
그리고 추가 질문으로 여기에 물어봐도 되는지 모르겠는데요...
date는 기본적으로 년, 월, 일을 같이 선택하게 되었잇는데 선택하고 나중에 년, 월, 일로 쪼개서 사용할 수 있나요??
예를 들면 2013 - 1 - 30을 선택하고 나중에 임의로 변수 year, month, day를 지정하고 year에는 2013을 month에서 1을 day에는 30을 저장 할 수 있나요???
A
안녕하세요. 송현석님
말씀하신 Library Import 외에 Data Picker를 사용하려면
<script src="/js/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.js"></script> 위로
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>를 적용하고,
스크립트 가장 아래에
<!-- datebox javascript-->
<script type="text/javascript" src="/js/egovframework/mbl/cmm/datepicker/jquery.mobile.datebox.js"></script>를 적용해야 Date Picker가 제대로 적용되어 사용하실 수 있습니다.
참고URL은 http://m.egovframe.go.kr/mguide/guide/components/picker/picker.do 입니다.
추가로 Date Picker의 커스터마이징은
직접 해당 스크립트 구현하여 사용하셔야 합니다.
고맙습니다. 좋은 하루 되시길 바랍니다.
말씀하신 Library Import 외에 Data Picker를 사용하려면
<script src="/js/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.js"></script> 위로
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>를 적용하고,
스크립트 가장 아래에
<!-- datebox javascript-->
<script type="text/javascript" src="/js/egovframework/mbl/cmm/datepicker/jquery.mobile.datebox.js"></script>를 적용해야 Date Picker가 제대로 적용되어 사용하실 수 있습니다.
참고URL은 http://m.egovframe.go.kr/mguide/guide/components/picker/picker.do 입니다.
추가로 Date Picker의 커스터마이징은
직접 해당 스크립트 구현하여 사용하셔야 합니다.
고맙습니다. 좋은 하루 되시길 바랍니다.
