Firefox 및 / 또는 IE 10에서 HTML 5 입력 유형 = “날짜”를 얻는 방법 / 날짜를 얻기 위해 또

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 이상은 입력 유형 = 날짜를 지원합니다



답변

당신이 시도 할 수 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 또는 새로운 기능에 대한 지원이 포함됩니다.


답변

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

활성화하려면 :

about : config

dom.forms.datetime- > true로 설정

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


답변

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- 필요한 경우 날짜 형식 변경을 참조하십시오 .


답변

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

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

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


답변

다음은 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" />


답변

이렇게하면 날짜 선택기 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에 동의합니다.


답변

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

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

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

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

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

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