jQuery Mobile - Datepicker(데이타 픽커)

터치 디바이스에 적합하도록 jQuery UI의 datapicker를 확장하려면 특정 파일을 추가하여야 합니다. 이 플러그인은 JQM에 기본적으로 내장되어 있지 않습니다. 그래서, 우리는 아래와 같은 파일을 추가해야 사용할 수 있습니다.

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script src="jQuery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>

datepicker는 type=”date” 속성을 가지고 있는 input 태그를 자동으로 변환해줍니다.

<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value=""  />   

보기 좋게 하기 위해서 label과 input 태그를 fieldcontain으로 감싸는 것을 추천합니다. 그리고 이러한 요소는 C-등급의 브라우저 접근을 위한 폼 요소 내부에 위치해야 합니다.

또한, native datapicker가 우리가 추가한 사용자화된 datapicker과 충돌하지 않도록, datapicker가 JQM에 의해 향상된 후에 date input요소가 text input요소로 변환하기 위한 페이지 플러그인 설정을 구성하는 것이 좋습니다. 이를 위해 mobileinit 이벤트로 바인드하고 date의 input type 뒤에 페이지 플러그인의 옵션을 사용하여 셋팅합니다.
   
<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });   
</script>

이 이벤트 바인딩 스크립트는 jQuery 뒤, jQuery Mobile 앞에 위치되어야 합니다.
실제 크롬 브라우저에서 아래와 같이 적용해 보았는데, 아직 UI가 이쁘게 보이진 않네요.

<form action="#" method="get">
<div data-role="fieldcontain">
    <label for="date">Date Input:</label>
    <input type="date" name="date" id="date" value=""  />
</div>       
</form>