iOS / Android의 웹 앱에서 기본 날짜 선택기 호출

HTML5를 사용하여 다양한 플랫폼에서 네이티브 웹 앱을 실행하여 가능성을 탐색하려고합니다. 현재 <input type="date">필드는 Android 및 iOS에서 표준 소프트 키보드를 엽니 다. 미래에는 모바일 OS의 소프트 키보드에 날짜 선택기 등이 포함될 것이라고 생각 <select>합니다. 오늘날 기본 선택 을 호출하는 것과 같습니다 .

이것은 Android 또는 iOS에서 구현되지 않고 기본 UI로 구현되었으므로 웹 앱이 기본 날짜 선택기를 호출 할 수 있습니까?

이렇게하면 jQuery 모바일 및 YUI와 같은 JavaScript 라이브러리 사용을 중단 할 수 있습니다.

내 질문이 어떤 식 으로든 명확하지 않은 경우 알려주십시오. 미리 감사드립니다 :-)

몇 년 후 일부 장치는 지원 <input type="date">하지만 다른 장치는 지원 하지 않으므로주의해야합니다. 다음은 2012 년의 몇 가지 관찰 결과이며 현재까지도 유효 할 수 있습니다.

• type="date"해당 속성을 설정 한 다음 해당 값을 다시 읽어 지원 여부를 감지 할 수 있습니다 . 지원하지 않는 브라우저 / 장치는 유형 설정을 무시하고 해당 속성을 다시 읽을 때 date반환 text됩니다. 또는 Modernizr 를 감지에 사용할 수 있습니다. 일부 Android 버전을 확인하는 것만으로는 충분하지 않습니다. Android 4.0.3의 Samsung Galaxy S2는를 지원 type="date"하지만 최신 Android 4.0.4의 Google / Samsung Nexus S 는 지원 하지 않습니다 .

• 기본 날짜 선택기의 날짜를 미리 설정할 때 장치가 인식하는 형식을 사용해야합니다. 그렇게하지 않으면 장치가 자동으로이를 거부하여 기존 값을 표시하려고 할 때 빈 입력 필드를 남겨 둘 수 있습니다. 안드로이드 4.0.3 힘을 실행하는 갤럭시 S2의 날짜 선택기를 사용처럼 자체는 설정 <input>에 2012-6-1유월을 위해 1 일. 그러나 JavaScript에서 값을 설정할 때 앞에 0이 필요합니다 : 2012-06-01.

• Cordova (PhoneGap)와 같은 것을 사용하여 지원하지 않는 장치에서 기본 날짜 선택기를 표시 할 때 type="date":

  • 기본 제공 지원을 올바르게 감지해야합니다. 갤럭시 S2에 2012 년 잘못, 안드로이드 4.0.3을 실행처럼 도 다시 한 번 첫 번째 항목에서 "설정"을 클릭 한 후 : 두 번 연속 날짜 선택을 보여주는 결과 것 코르도바 안드로이드 플러그인을 사용.

  • 동일한 페이지에 여러 입력이있는 경우 일부 장치는 다른 양식 필드에 들어가기 위해 "이전"및 "다음"을 표시합니다. iOS 4에서 이것은 onclick핸들러를 트리거하지 않으므로 사용자에게 일반 입력을 제공합니다. onfocus플러그인을 트리거하는 데 사용 하는 것이 더 잘 작동하는 것 같습니다.

  • iOS 4에서 onclick또는 onfocus을 사용 하여 2012 iOS 플러그인을 트리거하려면 먼저 일반 키보드 쇼를 만든 다음 날짜 선택기가 그 위에 배치되었습니다. 다음으로 날짜 선택기를 사용한 후에도 일반 키보드를 닫아야합니다. $(this).blur()날짜 선택기가 표시되기 전에 포커스를 제거하는 데 사용하면 iOS 4에 도움이되었으며 테스트 한 다른 장치에는 영향을 미치지 않았습니다. 그러나 그것은 iOS에서 키보드의 빠른 깜박임을 도입했으며 날짜 선택기가 느려서 처음 사용할 때 상황이 훨씬 더 혼란 스러울 수 있습니다. readonly플러그인을 사용하는 경우 입력을 통해 일반 키보드를 완전히 비활성화 할 수 있지만 동일한 화면에서 다른 입력을 입력 할 때 "이전"및 "다음"버튼을 비활성화했습니다. 또한 iOS 4 플러그인이 기본 날짜 선택기에 "취소"를 표시하지 않은 것 같습니다.

  • iOS 4 iPad (시뮬레이터)에서 2012 년에는 Cordova 플러그인이 올바르게 렌더링되지 않았으며 기본적으로 사용자에게 날짜를 입력하거나 변경할 수있는 옵션을 제공하지 않았습니다. (아마도 iOS 4는 웹보기 위에 기본 날짜 선택기를 멋지게 렌더링하지 않거나 웹보기의 CSS 스타일이 약간의 영향을 미칠 수 있으며 실제 장치에서는 다를 수 있습니다. 댓글을 달거나 편집하십시오!)

  • 2012 년에도 Android 날짜 선택기 플러그인은 iOS 플러그인과 동일한 JavaScript API를 사용하려고 시도했고 예제에서 사용 allowOldDates했지만 Android 버전은 실제로이를 지원하지 않았습니다. 또한 2012/7/2iOS 버전이를 반환하는 동안 새 날짜를 반환했습니다 Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

• <input type="date">이 지원 되더라도 상황이 복잡해 보일 수 있습니다.

  • iOS 5 2012-06-01는 1 Jun. 2012또는 같은 현지화 된 형식으로 멋지게 표시됩니다 June 1, 2012(그리고 날짜 선택기를 작동하는 동안 즉시 업데이트도 가능합니다). 그러나, 갤럭시 S2 안드로이드 4.0.3 쇼에게 추악한 실행 2012-6-1또는 2012-06-01로케일이 사용된다 상관없이.

  • iPad (시뮬레이터)의 iOS 5는 날짜 입력을 터치 할 때 이미 표시되어 있거나 다른 입력에서 "이전"또는 "다음"을 사용할 때 키보드를 숨기지 않습니다. 그런 다음 입력 아래에 날짜 선택기 와 하단에 키보드가 동시에 표시 되며 둘 다 입력을 허용하는 것 같습니다 . 그러나 보이는 값을 변경하더라도 키보드 입력은 실제로 무시됩니다. (값을 다시 읽거나 날짜 선택기를 다시 호출 할 때 표시됩니다.) 키보드가 아직 표시되지 않은 경우 날짜 입력을 터치하면 키보드가 아닌 날짜 선택기 만 표시됩니다. (실제 기기에서는 다를 수 있으니 댓글을 달거나 수정 해주세요!)

  • 장치는 입력 필드에 커서를 표시 할 수 있으며 길게 누르면 클립 보드 옵션이 트리거되어 일반 키보드도 표시 될 수 있습니다. 클릭 할 때 일부 장치는 날짜 선택기를 표시하도록 변경하기 전에 잠시 동안 일반 키보드를 표시 할 수도 있습니다.

iOS 5는 이제 HTML5를 더 잘 지원합니다. 웹 앱에서

<input type="date" name="date" />

4.0 이후의 Android에는 이러한 유형의 기본 메뉴 지원이 없습니다.

iOS5는이를 지원합니다 ( 참조 ). 기본 날짜 선택기를 호출하려면 PhoneGap 옵션이있을 수 있습니다 (직접 테스트하지 않음).

부여 Mobiscroll을 시도합니다. 스크롤러 스타일 날짜 및 시간 선택기는 특히 터치 장치에서의 상호 작용을 위해 만들어졌습니다. 매우 유연하고 쉽게 사용자 정의 할 수 있습니다. iOS / Android 테마와 함께 제공됩니다.

내 대답은 지나치게 단순합니다. 크로스 플랫폼에서 작동하는 간단한 코드를 작성하려면 window.prompt 메서드를 사용 하여 사용자에게 날짜를 요청하십시오. 분명히 정규식으로 유효성을 검사 한 다음 날짜 개체를 만들어야합니다.

function onInputClick(e){
var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01");
if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){
    //date ok
    e.value=r;
    var split=e.value.split("-");
    var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2]));
}else{
    alert("Invalid date. Try again.");
}
}

HTML에서 :

<input type="text" onclick="onInputClick(this)" value="2014-01-01">

Trigger.io의 UI 모듈을 사용하여 일반 HTML5 입력과 함께 기본 Android 날짜 / 시간 선택기를 사용할 수 있습니다 . 그렇게하려면 전체 프레임 워크를 사용해야합니다 (일반 모바일 웹 페이지로 작동하지 않음).

이 블로그 게시물 : 날짜 시간 선택기 에서 전후 스크린 샷을 볼 수 있습니다.

HTML에서 :

  <form id="my_form"><input id="my_field" type="date" /></form>

JavaScript에서

   // test and transform if needed
    if($('#my_field').attr('type') === 'text'){
        $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd');  
    };

    // check
    if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \-.](0[1-9]|1[012])[- \-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){
        $('#my_field').removeClass('bad');
    } else {
        $('#my_field').addClass('bad');
    };

양식 요소에서 input type="time". 데이터 선택기 라이브러리를 사용하려는 모든 번거 로움을 덜어줍니다.