Home Back

egovframework

Date picker

Date picker는 팝업 형태로 나타나며 날짜를 선택할 수 있도록 기능을 제공한다.

유의사항

Ajax로 도메인 내부링크를 연결 후 팝업형태의 picker를 출력시 picker가 닫히지 않는다.(width가 480일 경우 자동적으로 팝업형태로 출력) 이를 방지 하기 위해 첫 도메인 내부링크는 data-ajax="false" 또는 rel="external"를 선언하여 페이지를 호출하거나 팝업형태의 picker가 출력되지 않도록 한다.

예시보기

A.jsp

  • <a href="B.jsp" data-role="button" data-ajax="false">Go To 2nd Page</a>
  • <a href="B.jsp" data-role="button" rel="external">Go To 2nd Page</a>

B.jsp

  • <--main page start-->
  • <div data-role="page" id=main>
  • <div data-role="header" data-theme="b">
  • ...
  • </div>
  • <div data-role="content">
  • <div data-role="fieldcontain">
  • <label for="defandroid">Some Date</label>
  • <input name="defandroid" type="date" data-role="datebox" id="defandroid" data-options='{"useDialogForceFalse": true}'/>
  • </div>
  • </div>
  • ...
  • </div>
  • <--sub page start-->
  • <div data-role="page" id="sub">
  • ...
  • </div>

기본코드

Date Picker를 사용 하기 위해서는 아래의 CSS 및 자바 스크립트 적용 순서를 아래와 같이 지정하여야 한다.


스크립트 가장 아래에 적용

  • <!-- datebox css-->
  • <!-- jqm-datebox.css - datebox Component 디자인 css 파일 -->
  • <!-- datebox javascript-->
  • <!-- jqm-datebox.core.js - 각각의 모든 Date / Time Picker Component 들의 코어 부분 -->
  • <!-- jqm-datebox.mode.calbox.js - 일반 calendar 형태의 Component 지원 -->
  • <!-- jqm-datebox.mode.datebox.js - Android 형태의 Component 지원 -->
  • <!-- jqm-datebox.mode.flipbox.js - Filp 형태의 Component 지원 -->
  • <!-- jquery.mobile.datebox.i18n.ko.utf8.js - Component 관련 언어 및 기타 옵션 설정 파일 -->
  • <link type="text/css" rel="stylesheet" href="<c:url value="/css/egovframework/mbl/cmm/datepicker/jqm-datebox.css" />" />
  • <script type="text/javascript" src="<c:url value="/js/egovframework/mbl/cmm/datepicker/jqm-datebox.core.js"></script>
  • <script type="text/javascript" src="<c:url value="/js/egovframework/mbl/cmm/datepicker/jqm-datebox.mode.calbox.js"></script>
  • <script type="text/javascript" src="<c:url value="/js/egovframework/mbl/cmm/datepicker/jqm-datebox.mode.datebox.js"></script>
  • <script type="text/javascript" src="<c:url value="/js/egovframework/mbl/cmm/datepicker/jqm-datebox.mode.flipbox.js"></script>
  • <script type="text/javascript" src="<c:url value="/js/egovframework/mbl/cmm/datepicker/jquery.mobile.datebox.i18n.ko.utf8.js"></script>

안드로이드형태

안드로이드 형태는 상/하 버튼을 눌러 날짜를 선택 할 수 있다.

  • <div data-role="fieldcontain">
  • <label for="mydate1">Some Date</label>
  • <input name="mydate" id="mydate1" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>/>
  • </div>

달력 형태

안드로이드 형태에 <input name="mydate1"> Tag에 data-options='{"mode": "calbox"}'를 추가한다.

  • <div data-role="fieldcontain">
  • <label for="defandroid1">Some Date</label>
  • <input name="mydate" id="defandroid1" type="date" data-role="datebox" data-options='{"mode": "calbox"}' >
  • </div>

스크롤 형태

안드로이드 형태에 <input name="mydate1"> Tag에 data-options='{"mode": "flipbox"}'를 추가한다.

  • <div data-role="fieldcontain">
  • <label for="defandroid2">Some Date</label>
  • <input name="mydate" id="defandroid2" type="date" data-role="datebox" data-options='{"mode": "flipbox" }' >
  • </div>

Time picker

Time picker는 팝업 형태로 나타나며 시간을 선택 할 수 있도록 한다.

24 시간 단위

안드로이드 형태에 <input name="mydate1> Tag에 data-options='{"mode": "timebox", "overrideTimeFormat": 24}'를 추가한다.

  • <div data-role="fieldcontain">
  • <label for="mydate2">Some Time (24hour)</label>
  • <input name="mydate" id="mydate2" type="date" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeFormat": 24}' >
  • </div>

12 시간 단위

안드로이드 형태에 <input name="mydate1"> Tag에 data-options='{"mode": "timebox", "overrideTimeOutput": "%l:%M %p"}'를 추가한다.

  • <div data-role="fieldcontain">
  • <label for="mydate3">Some Time (24hour)</label>
  • <input name="mydate" id="mydate3" type="date" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeOutput": "%l:%M %p"}'>
  • </div>

스크롤 형태

안드로이드 형태에 <input name="mydate1"> Tag에 data-options='{"mode": "timeflipbox", "overrideTimeOutput": "%l:%M %p"}'를 추가한다.

  • <div data-role="fieldcontain">
  • <label for="mydate4">Some Time (24hour)</label>
  • <input name="mydate" id="mydate4" type="date" data-role="datebox" data-options='{"mode": "timeflipbox", "overrideTimeOutput": "%l:%M %p"}'>
  • </div>

색상 변경

Date/Time Picker Tag 에
Android 형태로는 data-options='{"themeHeader": "[a~g]", "themeButton": "[a~g]"}'
Calendar 형태로는 data-options='{"themeHeader": "[a~g]", "themeDate": "[a~g]"}' 을 추가 한다.
data-options 내부에 정의된 themeHeader는 Picker의 상단 헤더 부분의 색상을 변경하는 것이고,
themeButton(Android)은 변경버튼(+, -)버튼의 색상을 의미하며,
themeDate(Calendar)는 달력 내부의 날짜 색상을 의미한다. 색상 변경은 theme type 페이지을 참조 한다.

  • <div data-role="fieldcontain">
  • <label for="mydate5">Some Date</label>
  • <input name="mydate" id="mydate5" type="date" data-role="datebox" data-options='{"mode": "datebox" ,"themeHeader": "g" ,"themeButton": "b"}'>
  • </div>
  • <div data-role="fieldcontain">
  • <label for="mydate6">Some Date</label>
  • <input name="mydate" id="mydate6" type="date" data-role="datebox" data-options='{"mode": "calbox" , "themeHeader": "g" ,"themeDate": "b"}'>
  • </div>

Copyright(c)2012 Ministry of Security and Public Administration.