브라우저가 <input type = 'date'>를 지원하는지 어떻게 알 수 있습니까?


82

중복 가능성 :
HTML5 유형 감지 및 플러그인 초기화

<input type=date>

(선택적) 사용자 에이전트 제공 datepicker로 입력을 만들어야하지만 아직 널리 지원되지 않으므로 jQuery UI Datepicker를 사용하고 있습니다. 브라우저가 자신의 datepicker를 사용하고 브라우저에 그런 것이없는 경우에만 jQuery UI를 사용하도록 허용하려면 어떻게해야합니까?

현재 나는 Opera에만 datepicker가 내장되어 있다고 생각하지만 Opera에 대한 테스트는 분명히 나쁠 것입니다. 이 기능을 감지 할 수있는 방법이 있습니까 (휴대용으로 가능하다면)?


1
날짜 지원을 감지하는 것은 다른 브라우저가 다른 수준의 날짜를 지원한다는 사실로 인해 복잡합니다. 일부는 멋진 달력 날짜 선택기를 제공합니다. 다른 사람들은 그것이 날짜처럼 보이는지 확인합니다.
rjmunro

2
정확히 내가 질문 한 이유입니다. 브라우저가 날짜 입력을 이해한다고 주장하는 것이 아니라 브라우저에 날짜 선택기가 있는지 알고 싶었습니다. AFAICT는 중복이 아니며 아래 답변은 도움이되지 않습니다. 나는 업데이트하거나 이의를 제기하지 못했습니다. 나는 그냥 가서 <input class=datepicker>항상 jquery ui datepicker (구식 방식)를 사용합니다.
DaedalusFall

1
데스크톱 브라우저에서 날짜 입력 UI는 종종 원하는 것을 남깁니다. 그들이 그것을 지원하더라도 그것을 사용하고 싶지 않을 수 있습니다. 이 문제는 모바일 브라우저에 영향을 미치지 않는 것 같습니다.
rich remer

답변:


132

다음 메서드는 대부분의 브라우저에서 일부 입력 유형이 지원되는지 확인합니다.

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

그러나 simonox 가 의견에서 언급했듯이 일부 브라우저 (Android 스톡 브라우저)는 특정 유형 (날짜)을 지원하는 척하지만 날짜 입력을위한 UI를 제공하지 않습니다. 그래서 simonox 는 날짜 필드에 잘못된 값을 설정하는 트릭을 사용하여 구현을 개선했습니다. 브라우저가이 입력을 삭제하면 datepicker도 제공 할 수 있습니다 !!!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

8
안드로이드 재고 브라우저에서 작동하지 않습니다, 그건 사실 반환하지만 날짜 선택기를 지원하지 않습니다
비욘 앤더슨

33
유형 속성 요청은 모든 Android 스톡 브라우저에서 작동하지 않습니다. 그들은 inputType = date를 지원하는 척하지만 날짜 입력을위한 UI를 제공하지 않습니다. 이 기능 감지는 저에게 효과적이었습니다. function () {var el = document.createElement ( 'input'), notADateValue = 'not-a-date'; el.setAttribute ( 'type', 'date'); el.setAttribute ( 'value', notADateValue); return! (el.value === notADateValue); } 트릭은 날짜 필드에 잘못된 값을 설정하는 것입니다. 브라우저가이 입력을 삭제하면 날짜 선택기를 제공 할 수도 있습니다.
simonox

@simonox : 아주 좋은 솔루션입니다. 덕분에 그
Bartłomiej 잘레 스키

3
'! ==='= '! =='을 의미합니까? :)
Matty Balaam

1
@MattyBalaam 분명히 그것은 구문 오류였습니다. 나는 그것을 :) 고정
Ionică Bizău을
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.