모든 브라우저에서 <input type =“date”>를 지원하는 방법은 무엇입니까? 대안이 있습니까?

83

HTML5 요소 입력 속성으로 작업 중이며 Google 크롬 만 날짜, 시간 속성을 지원합니다. Modernizr를 시도 했지만 내 웹 사이트에 통합하는 방법을 이해할 수 없습니다 (코드화 방법 / 구문 / 포함 사항). 모든 브라우저에서 날짜, 시간 속성을 사용하는 방법에 대한 코드 스 니펫.

javascript  jquery  html  jquery-ui 
— 레오나르 개발자
소스
Datepicker를 사용하는 컨트롤의 종류는 무엇입니까 ?? 어쩌면 JQuery UI가 완벽할까요 ??
— Sebastien
11
날짜 입력을 shim하기위한 엄청난 가중치를 포함하여 jQueryUI에 아직 의존하지 않는 경우 기본 결정이되어서는 안됩니다.
— jfmatt 2013-08-02
완전한 예제는 html5doctor.com/…
— koppor

답변:

117

입력 유형 date을 지원하지 않는 브라우저 는 기본적으로 표준 유형 인으로 설정 text되므로 유형 속성 (속성이 아님) 을 확인하기 date만하면됩니다. 그렇지 않은 경우 브라우저에서 날짜 입력을 지원하지 않습니다. 자신 만의 datepicker를 추가합니다.

if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

깡깡이

물론 원하는 datepicker를 사용할 수 있습니다. jQuery UI의 datepicker는 아마도 가장 일반적으로 사용되는 것일 수 있지만 UI 라이브러리를 다른 용도로 사용하지 않는 경우 자바 스크립트를 상당히 추가하지만 수백 개의 대체 datepicker가 있습니다. 에서 고르다.

type속성은 결코 브라우저는 기본에 다시 떨어질 것, 변하지 않는 text하나의 속성을 확인하는, 그래서 속성 유형입니다.
위의 예 에서처럼 속성은 여전히 ​​선택기로 사용할 수 있습니다.

— 아데 네오
소스
1
DOM으로 내려가는 것보다 jQuery를 사용하여 속성을 확인하는 것이 더 나을 수 있습니까? $('input').prop('type') != 'date'
— IMSoP 2013-08-02
당신은 또한 당신이 원하는 텍스트 입력에 대한 일부 필터를 사용할 수 있습니다. class = "date"등을 추가하여 수행 할 수 있습니다.
— Owen Beresford
6
"date"가 지원되지 않으면 입력의 "type"이 "text"로 변경되지만 "type"속성은 "date"로 유지됩니다. 그래서 이것은 선택기로 쉽게 사용할 수 있습니다. 나는 이런 방식으로 바이올린을 업데이트했습니다 : jsfiddle.net/2AaFk/34
— Michael Wyraz 2014-08-19
2
@MichaelWyraz 내가 바이올린을 확인했을 때 사파리 브라우저에서 작동하지 않는 것 같습니다.
— Rishabh Seth
1
이것은 나를 위해 일했습니다. 필요한 CSS가 없다는 것을 알았습니다. stackoverflow.com/a/29791769/1339326 <link rel = "stylesheet"href = "// code.jquery.com /ui/1.11.2/themes/smoothness/jquery-ui.css ">
— magorich
14

Modernizr는 새로운 HTML5 입력 유형이 처리되는 방식에 대해 실제로 변경하지 않습니다. 그것은 기능의 검출 하지 심 (제외한 <header>, <article>등이 유사한 블록 요소로 취급 할 수있는 심 <div>).

을 사용하려면 자신의 스크립트 <input type='date'>를 확인 Modernizr.inputtypes.date하고 false이면 날짜 선택기를 제공하는 다른 플러그인을 켜야합니다. 선택할 수있는 수천 가지가 있습니다. Modernizr는 시작할 곳을 제공 할 수있는 폴리 필 목록을 완전하지 않게 유지 합니다 . 또는 그냥 놓아 둘 수 있습니다. 모든 브라우저 text는 인식 할 수없는 입력 유형이 표시 될 때 되돌아가 므로 최악의 경우 사용자가 날짜를 입력해야합니다. (플레이스 홀더를 제공하거나 jQuery.maskedinput과 같은 것을 사용하여 추적 할 수 있습니다.)

— jfmatt
소스
11

Modernizr 예제를 요청 했으므로 여기에 있습니다. 이 코드는 Modernizr를 사용하여 '날짜'입력 유형이 지원되는지 여부를 감지합니다. 지원되지 않는 경우 JQueryUI datepicker로 실패합니다.

참고 : JQueryUI를 다운로드하고 자신의 코드에서 CSS 및 JS 파일의 경로를 변경해야합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Modernizer Detect 'date' input type</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
        <script type="text/javascript">
            $(function(){
                if(!Modernizr.inputtypes.date) {
                    console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
                    $("#theDate").datepicker();
                }
            });
        </script>
    </head>
    <body>
        <form>
            <input id="theDate" type="date"/>
        </form>
    </body>
</html>

이것이 당신에게 효과가 있기를 바랍니다.

— 팀 S
소스
참고 모더 나이저 3, 당신은 사용하여 설정을 생성해야한다는 modernizr.com/download?inputtypes-setclasses을 에 설명 된대로와 자바 스크립트를 컴파일 modernizr.com/docs/#downloading-modernizr
— koppor
7 
   <script>
      var datefield = document.createElement("input")
      datefield.setAttribute("type", "date")
      if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
         document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
      }
   </script>

 <script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
       jQuery(function($) { // on document.ready
           $('#birthday').datepicker();
       }); <- missing semicolon
    }
 </script>


<body>
 <form>
   <b>Date of birth:</b>
   <input type="date" id="birthday" name="birthday" size="20">
   <input type="button" value="Submit" name="B1">
 </form>
</body>

소스 1 및 소스 2

— 리타 브라 타 가우 탐
소스
2

Chrome 버전 50.0.2661.87m은 변수에 할당 될 때 mm-dd-yy 형식을 지원하지 않습니다. yy-mm-dd를 사용합니다. IE와 Firefox는 예상대로 작동합니다.

— 켈빈
소스
2

내가 찾은 가장 쉽고 작동하는 솔루션은 다음 브라우저에서 작업하는 것입니다.

  1. 구글 크롬
  2. Firefox
  3. Microsoft Edge

  4. 원정 여행

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h2>Poly Filler Script for Date/Time</h2>
<form method="post" action="">
    <input type="date" />
    <br/><br/>
    <input type="time" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

</body>
</html>
— 카 시프 라티프
소스
0

영국 dd / mm / yyyy 형식을 유지하면서 문제가 발생했습니다. 처음에는 adeneo https://stackoverflow.com/a/18021130/243905 의 답변을 사용 했지만 사파리에서 작동하지 않아서 이렇게 변경되었습니다. 내가 알 수있는 한 jquery-ui datepicker, jquery 유효성 검사를 사용하여 전체적으로 작동합니다.

if ($('[type="date"]').prop('type') !== 'date') {
    //for reloading/displaying the ISO format back into input again
    var val = $('[type="date"]').each(function () {
        var val = $(this).val();
        if (val !== undefined && val.indexOf('-') > 0) {
            var arr = val.split('-');
            $(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
        }
    });

    //add in the datepicker
    $('[type="date"]').datepicker(datapickeroptions);

    //stops the invalid date when validated in safari
    jQuery.validator.methods["date"] = function (value, element) {
        var shortDateFormat = "dd/mm/yy";
        var res = true;
        try {
            $.datepicker.parseDate(shortDateFormat, value);
        } catch (error) {
            res = false;
        }
        return res;
    }
}
— nat
소스
0 
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
    var datefield = document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
</script>

<script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
        jQuery(function($) { // on document.ready
            $('#start_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
            $('#end_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        })
    }
</script>
</head>
<body>
    <input name="start_date" id="start_date" type="date" required>
    <input name="end_date" id="end_date" required>
</body>
</html>
— Amol Shirude
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.