Home Back

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를 사용 하기 위해서는 아래의 자바 스크립트 적용 순서를 아래와 같이 지정해 줘야한다.


jquery.mobile-1.0b3.min.js 위에 적용

  • <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>

안드로이드형태

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

  • <div data-role="fieldcontain">
  • <label for="defandroid">Some Date</label>
  • <input name="defandroid" type="date" data-role="datebox" id="defandroid"/>
  • </div>

달력 형태

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

  • <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>

Time picker

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

24 시간 단위

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

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

12 시간 단위

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

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

색상 변경

Date/Time picker 테그 내부에 data-options='{"page": "[a~g]", "button": "[a~g]"}'을 추가 한다. data-options 내부에 정의된 page는 picker의 전체 페이지 색상 및 확인버튼의 색상을 나타내며 button은 변경버튼(+, -)버튼의 색상을 의미한다. 또한 달력 형식의 Date picker는 data-options='{"button": "[a~g]"}'만 정의해도 무방하다. 색상 변경은 theme type 페이지을 참조 한다.

  • <div data-role="fieldcontain">
  • <label for="mydate">Some Time (24hour)</label>
  • <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"page": "a", "button": "f"}'>
  • </div>
  • <div data-role="fieldcontain">
  • <label for="mydate">Some Time (24hour)</label>
  • <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "button": "e"}'>
  • </div>

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