Firefox 및 / 또는 IE 10에서 HTML 5 입력 유형 = "날짜"를 얻는 방법

191

input type="date"이 모든 시간이 지난 후에도 여전히 Firefox에서 지원되지 않는 것이 이상합니다 . 사실, 나는 그들이 입력 요소에 HTML 5 새로운 유형을 많이 추가했다고 생각하지 않습니다. IE10에서 지원되지 않는다는 사실에 놀라지 마십시오. 제 질문은 ...

IE 및 Firefox 브라우저 전용 달력 / 날짜를 얻기 위해 또 다른 .js 파일 (예 : DatePicker 위젯) 을 추가하지 않고 작동 type="date"하는 input요소 를 얻는 방법은 jQueryUI무엇입니까? Firefox 및 / 또는 IE 브라우저에서이 기능이 기본적으로 작동하도록하는 어딘가에 적용될 수있는 (CDN일까요?)? IE 8+ 브라우저 및 Firefox를 대상으로하려고 시도해도 중요하지 않습니다. 최신 버전 (28.0)이 좋습니다.

업데이트 : Firefox 57 이상은 입력 유형 = 날짜를 지원합니다

html  forms  jquery-ui  internet-explorer  firefox 
— 솔로몬 클로 손
소스
29
Firefox가 여전히이 기능을 지원하지 않는 것은 말도 안되는 것 같습니다. 요즘 하루에 일주일 동안 Chrome에서 Firefox로 전환하여 요즘의 내용을 확인하면 즉시 다시 전환하고 싶습니다!
— Codemonkey
19
자사의 농담 FF supping하지 날짜
— SuperUberDuper
6
이것이 사람들이 Firefox가 최고의 브라우저라고 말할 때 화가 나는 이유입니다.
— Martin Braun
1
polyfill은 아니지만 jquery 나 다른 의존성이없는 일반 js lib 인 pickaday 를 사용 했습니다 .
— mb21
2
Firefox 57에서는 기본적으로 작동하는 것 같습니다. 여전히!
— 앙투안 핀 사드

답변:

138

당신이 시도 할 수 webshims을 볼 수있는 CDN 이 필요한 경우 + 만의 polyfill을로드합니다.

CDN 데모 : http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

기본 구성이 만족스럽지 않으면 여러 가지 구성 방법이 있습니다 . 여기서 datepicker 구성기를 찾으십시오 .

참고 : 향후 webshim에 대한 새로운 버그 수정 릴리스가있을 수 있습니다. 더 이상 주요 릴리스가 없습니다. 여기에는 jQuery 3.0 또는 새로운 기능에 대한 지원이 포함됩니다.

— 알렉산더 파르 카스
소스
이것은 좋은 해결책이며 구성은 풍부하지만 "YYYY / MM / DD"와 같은 날짜 형식을 설정할 위치를 찾을 수 없습니다.
— Pavel Niedoba
14
IE 11에서이 jsfiddle을 실행하려고하면 "액세스가 거부되었습니다"오류가 발생하고 날짜 선택기가 작동하지 않습니다.
— Shavais
4
IE10에서는 작동하지 않습니다 ... @ Shavais에서 언급 한 것과 동일한 오류가 발생합니다 ... jquery 버전을 1.11 이상으로 업그레이드하려면 ..이 링크를
— Nitin
2
안타깝게도 저자 사이트에서 알 수 있듯이 곧 출시 될 Jquery 3에 대한 웹 shim 지원은 수행되지 않습니다. 그래서 나는 좋고 오래된 Jquery UI에 의존합니다.
— marionmaiden
1
이것은 확실히 파이어 폭스에서 작동합니다. 그러나 IE에서 작동하지 않았습니다
— Varuni NR
27

버전 51 (2017 년 1 월 26 일) 이후 Firefox에 있지만 기본적으로 활성화되어 있지 않습니다 (아직)

활성화하려면 :

about : config

dom.forms.datetime- > true로 설정

https://developer.mozilla.org/en-US/Firefox/Experimental_features

— 조나단 바나 세
소스
다행 이네요 기본적으로 imo가 켜져 있어야합니다. 그러나 이것은 아는 것이 좋습니다.
— Solomon Closson
FF 64.0.2에 있지만이 옵션이 "true"(on)인데도 작동하지 않지만 날짜 시간 상자는 여전히 텍스트입니다. 나는 "timepicker"를 성공 시키려고 노력했다.
— Wasted_Coder
20

jQuery에서 제공 하는 datePicker 구성 요소 를 사용하여이 제한을 제거하는 간단한 방법이 있습니다.

  1. jQuery 및 jQuery UI 라이브러리 포함 (여전히 오래된 라이브러리를 사용하고 있습니다)

    • src = "js / jquery-1.7.2.js"
    • src = "js / jquery-ui-1.7.2.js"

  2. 다음 코드를 사용하십시오 

    $(function() {
     $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
});

jQuery UI DatePicker- 필요한 경우 날짜 형식 변경을 참조하십시오 .

— 닥스
소스
8
OP는 "또 다른 .js 파일 (즉, jQueryUI DatePicker 위젯)을 추가하지 않고 작업 중"이라고 표시하지만이 질문은 Google의 최고 인기 항목이므로 질문에 대한 답변은 아니지만 실제로 답변은 여전히 ​​매우 유용합니다. 지금 귀하의 게시물을 올리는 것에 대해 기분 나쁘게 느끼지 않았기를 바랍니다.
— phil294
2
캘린더를 올바르게 표시하려면 jQuery UI CSS도 포함해야합니다. <br> <link rel = "stylesheet"href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
— YuAn Shaolin Maculelê Lai
16

type = "date"는 현재 실제 사양이 아닙니다. Google이 고안 한 개념이며 whatwg 사양 (공식 아님)으로되어 있으며 Chrome 만 부분적으로 지원합니다.

http://caniuse.com/#search=date

이 시점에서는이 입력 유형에 의존하지 않습니다. 가지고있는 것이 좋을 것이지만, 나는 이것이 실제로 만드는 것을 예측하지는 않습니다. 첫 번째 이유는 다소 복잡한 입력에 가장 적합한 UI를 결정하기 위해 브라우저에 너무 많은 부담이 가해지기 때문입니다. 반응 형 관점에서 생각해보십시오. 공급 업체 중 400 픽셀, 800 픽셀 및 1200 픽셀에서 UI에 가장 적합한 것이 무엇인지 어떻게 알 수 있습니까?

— 크리스 사랑
소스
138
동의하지 않습니다. 브라우저는 이것을 알아낼만큼 똑똑해야합니다. 날짜 선택기를 사용하고 계속 업데이트 해야하는 데 정말 피곤합니다.
— SuperUberDuper
49
이상한 추론. 브라우저에는 부담이 크지 만 joe 웹 개발자에게는 그렇지 않습니까?!?
— jeroenh
35
이것은 이제 HTML 5 실무 초안의 일부입니다 : w3.org/html/wg/drafts/html/master/…
— Chris
7
나는 또한 모든 새로운 입력 유형에 기쁘다. 그것들은 더 잘 정의되고 기본적이며 보통 빠른 것을 의미합니다.
— Tomáš Zato-복원 모니카
5
@MM 감사합니다. 그 동안 HTML 5는 공식 W3C 권장 사항으로 업그레이드되었습니다. 새 링크는 w3.org/TR/2014/REC-html5-20141028/…
— Chris
9

다음은 YYYY-MM-DD 형식의 날짜를 사용한 전체 예입니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />
— drooh
소스
1
이 옵션으로 시간 선택기를 추가 할 수 있는지 아는 사람이 있습니까?
— drooh
JSFiddle @Drooh에서 스크립트를 시도했지만 작동하지 않습니다. 날짜를 선택할 때마다 입력 필드에 밀리 초처럼 나타나고 사라집니다. 누군가 dd / mm / yyyy 날짜 구성으로 작동하는 바이올린 버전을 제공 할 수 있습니까?
— Ryan Coolwebs
2016 년 8 월 현재 webshim은 jQuery 3에서 작동하지 않으며 테스트에서 2.2.4에서도 작동하지 않습니다.
— drooh
— 이라는 것을 알았습니다.
4

이렇게하면 날짜 선택기 UI를 얻을 수 없지만 Mozilla는 패턴 사용을 허용하므로 최소한 다음과 같은 방법으로 날짜 유효성 검사를 할 수 있습니다.

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

궁극적으로 나는 Mozilla가 이것을 기본적으로 포함시키는 데 뒤쳐져 있다는 점에서 @SuperUberDuper에 동의합니다.

— 아약스 1515
소스
1
"시간"에 대한 버전이 있습니까?
— 말콤 살바도르
1
이 예제를 확장하십시오. 입력에 대한 html 속성입니까?
— Wasted_Coder
3

이것은 Dax의 대답을 따르는 제안 일뿐입니다. (나는 그 대답에 의견을 달았지만 다른 질문에 대해서는 아직 평판이 충분하지 않습니다).

ID는 모든 필드마다 고유해야하므로 양식에 여러 날짜 필드가있는 경우 ID 대신 클래스 요소를 사용할 수 있습니다.

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

다음과 같이 입력하십시오.

 <input type="text" class="datepicker" name="your-name" />

이제 날짜 선택기가 필요할 때마다 해당 클래스를 추가하십시오. 추신 : 당신은 여전히 ​​js를 사용해야한다는 것을 알고 있습니다 : (그러나 적어도 당신은 모든 사이트에 설정되어 있습니다. 내 2 센트 ...

— 코덱시
소스
3

firefox 57 (Quantum)의 최신 버전 인 firefox는 2017 년 11 월 14 일에 릴리스 된 날짜 및 기타 기능을 지원합니다. 이 링크 를 클릭하여 다운로드 할 수 있습니다

— irfandar
소스
0

Alexander에게 감사합니다. en lang의 형식을 수정하는 방법을 찾았습니다. (어떤 언어가 그런 형식을 사용하는지 몰랐습니다)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');
— 파벨 니에도 바
소스
그 형식을 사용하는 유일한 'en'국가는 캐나다라고 생각합니다. 어쨌든 'en'은 모호합니다. 미국에도 고유 한 '특별한'날짜 형식이 포함되어 있기 때문입니다.
— Michael Scheper
필자의 경우 클라이언트 워크 스테이션과 다를 수있는 클라이언트 로캘의 날짜 형식을 재정의하는 것입니다. 그러나 특정 페이지 에서이 날짜 형식을 사용하고 싶습니다 (사본 붙여 넣기 이유로). Alexander Farkas 답변에 대한 의견과 비슷하지만 주석에 코드를 붙여 넣을 수 없으므로 별도의 답변으로 작성했습니다. 나는 이것을 1 년 이상 프로덕션 환경에서 사용하고 있습니다.
— Pavel Niedoba
조심해. Webshims가 로캘의 브라우저 해석에 의존하는 경우 예기치 않은 결과가 발생할 수 있습니다. 'en'은 다른 플랫폼 (시스템 로케일에 따라 다름) 또는 다른 브라우저에서도 동일한 형식을 의미하지는 않습니다. 캐나다의 브라우저 (일명 yyyy-mm-dd이지만 일관되지는 않음)에서는 'en-ca'로 해석되지만 인도의 브라우저에서는 'en-in'(대부분의 세계와 마찬가지로)으로 해석 될 수 있습니다. , dd-mm-yyyy를 생성합니다). 프로덕션 코드에 있다고해서 제대로 테스트되었다는 의미는 아닙니다. 대규모 사이트에서도 프로덕션 코드에 많은 i18n 버그가 있습니다.
— Michael Scheper
마지막 줄 $ .webshims.activeLang ( 'en'); lang (또는 로케일)이 브라우저 설정을 대체하는 webshim에 강제로 적용되므로 형식은 항상 동일합니다.
— Pavel Niedoba
0

때로는 다음과 같은 이유로 프로젝트에서 Datepicker http://jqueryui.com/datepicker/ 를 사용하지 않을 수도 있습니다 .

  • jquery를 사용하고 싶지 않습니다.
  • 프로젝트에서 jquery 버전의 충돌
  • 올해의 선택은 편리하지 않습니다. 예를 들어 10 년 전으로 이동하려면 이전 버튼을 120 번 클릭해야합니다.

날짜 입력에 대한 매우 간단한 크로스 브라우저 코드를 참조하십시오. 내 코드는 브라우저가 날짜 유형 입력을 지원하지 않는 경우에만 적용됩니다

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>
스 니펫 확장

— 안드레이
소스
3
이 코드는 완전히 실패합니다. 필드가 이미 "YYY-MM-DD"로 채워져 있기 때문에 날짜를 입력 할 수 없으며, 지우려고하면 다시 나타납니다.
— Stephen R
하이픈을 삭제하지 마십시오. Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11에서 성공적으로 테스트했습니다. 장치, OS 및 브라우저를 알려주십시오.
— Andrej
실제로 귀하의 의견 바로 아래에있는 "Run Code Snippet"링크를 치고 있습니다. "YYYY-MM-DD"자리 표시자가 입력을 시작할 때 사라지지 않고 적극적으로 경쟁하고 있기 때문에 날짜를 올바르게 입력 할 수 없습니다. Windows 10에서 최신 Firefox를 사용하고 있습니다.
— Stephen R
1
외부 JS 파일을 추가하지 않는 조건을 위반하므로 질문에 대답하지 않으며 실제로 코드 자체는 사용하기가 완전히 직관적이지 않습니다. 기본 날짜 형식이 아니더라도 입력 마스크가 다시 나타날 때 새로운 날짜를 입력 할 수없고 입력 마스크를 마스크가 아니라 실제 텍스트를 상자에 입력 할 수 없습니다. 마스크를 삭제해야합니다. 당신은 입력합니다. 어쨌든 정규 표현식 유효성 검사가있는 표준 입력보다 낫지 않습니다.
— MikeT
-2 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
— WAYSER
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.