모바일웹 날짜 입력기 만들기

HTML5에는 여러 가지 input type 들이 추가되었습니다. 각 input type에 알맞게 스마트폰의 내장 브라우저들은 적절한 UI 처리를 자동으로 해주는 경우가 있습니다. 안드로이드 진저브레드 OS를 사용하는 제 폰의 경우 기본 브라우저에서 input type=”email” 에 포커스를 주면 자동으로 영문과 @ 표시가 있는 키패드가 올라옵니다.

그러나 다양한 새로운 input type 들 (url, search, number, range, color 등) 에 대한 모바일 브라우저들의 지원은 스마트폰 OS 마다 제각각이며 아직 빈약한 편이라고 할 수 있습니다.

[현재 모바일 브라우저들의 input type별 키패드 지원 모습]

http://slides.html5rocks.com/#form-types-mobile

오늘은 모바일웹 개발에서 날짜 입력 부분에 사용할 수 있는 몇 가지 스타일을 소개해 드리려고 합니다. 날짜 입력 부분은 의미를 잘 살려 마크업을 만든다면 input type=”date” 를 사용하면 적합할 것입니다. 이 경우 제 폰에서는 input type=”text”와 다를 바가 없었습니다. 사용자가 그냥 날짜를 직접 타이핑해서 입력해야 하는 형태인 것이지요 (데스크탑용 크롬 브라우저에서는 input type=”date”를 사용하면 날짜를 선택할 수 있는 버튼을 제공해 줍니다. 또한 오페라 브라우저의 경우 달력모양의 date picker를 띄워 준다고 합니다.)

사용자가 날짜를 좀더 입력하기 쉽게 date picker를 띄우주는 형태를 세 가지 디자인으로 만들어 보았습니다.

 

1. jQuery UI의 date picker widget 사용

http://jqueryui.com/demos/datepicker/

데스크탑용 웹사이트 개발하실 때 이미 많이 사용하시던 방법이실 것입니다. 그걸 그대로 모바일용 웹사이트를 만들 때 사용한 것입니다.

http://codefactory.kr/examples/2011-08-27/calendar-1.html

 

2. SPINNING WHEEL ON WEBKIT FOR IPHONE/IPOD TOUCH 사용

http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch 을 방문해 보세요

정말 예쁜 날짜입력기를 만들어 놓으신 것을 보실 수 있습니다. 아래는 그것을 사용해서 제가 만들어 놓은 것입니다.

http://codefactory.kr/examples/2011-08-27/calendar-2.html

 

3. jQuery Mobile을 사용해서 만든 안드로이드 스타일 date picker

http://toddmhorst.wordpress.com/2010/12/24/android-like-date-picker-with-jquery-mobile/ 을 방문해 보세요

이 분도 예쁜 날짜 입력기를 만들어 놓으셨습니다.

http://managingmeals.com/demos/datepicker/

  • http://www.google.com/ Ethanael

    And I was just wodenirng about that too!