만드는 법모든 브라우저에서 지원됩니까?다른 대안이 있습니까?
HTML5 요소 입력 속성으로 작업하고 있는데 Google Chrome만 날짜, 시간 속성을 지원합니다.Modernizr을 시도했지만 웹사이트에서 통합하는 방법(코드화 방법/구문/포함)에 대해 이해할 수 없습니다.날짜, 시간 속성을 모든 브라우저에 적용하는 방법에 대한 코드 조각입니다.
입력 유형을 지원하지 않는 브라우저date기본값은 다음과 같은 표준 유형입니다.text , 따라서 유형 속성(속성이 아닌)을 확인하기만 하면 됩니다.date, 브라우저에서 날짜 입력을 지원하지 않으며, 자신의 날짜 선택기를 추가합니다.
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}
물론 원하는 날짜 선택기를 사용할 수 있습니다. jQuery UI의 날짜 선택기가 아마도 가장 일반적으로 사용되는 것일 것입니다. 하지만 UI 라이브러리를 다른 용도로 사용하지 않는 경우 자바스크립트가 꽤 추가되지만 수백 개의 대체 날짜 선택기가 있습니다.
그type속성은 변경되지 않습니다. 브라우저는 기본값으로만 돌아갑니다.text속성을 입력하므로 속성을 확인해야 합니다.
위의 예와 같이 속성을 선택기로 사용할 수도 있습니다.
Modernizr는 실제로 새로운 HTML5 입력 유형이 처리되는 방식에 대해 아무것도 바꾸지 않습니다.특징 검출기이지 심이 아닙니다(단, 제외).<header>,<article>, 그것은 다음과 유사한 블록 요소로 취급될 것을 암시하는 등.<div>).
사용방법<input type='date'>, 확인해 보셔야 할 것 같습니다.Modernizr.inputtypes.date사용자 자신의 스크립트에서, 만약 그것이 거짓이라면, 날짜 선택기를 제공하는 다른 플러그인을 켭니다.수천 가지를 선택할 수 있습니다. Modernizr는 시작할 수 있는 부분을 제공할 수 있는 폴리필 목록을 모두 포함하고 있습니다.또는 모든 브라우저가 뒤로 넘어갑니다.text입력 유형이 표시되면 인식하지 못하므로 최악의 경우 사용자가 날짜를 입력해야 합니다. (자리 표시자를 지정하거나 jQuery.masked 입력과 같은 방법을 사용하여 추적 상태를 유지할 수 있습니다.
Modernizr 예시를 요청하셨으니 여기 있습니다.이 코드는 Modernizr을 사용하여 '날짜' 입력 유형이 지원되는지 여부를 탐지합니다.지원되지 않는 경우 JQuery UI datepicker로 되돌아갑니다.
참고: JQuery UI를 다운로드해야 하며 자신의 코드로 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>
이 방법이 당신에게 효과가 있기를 바랍니다.
<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>
이것은 약간의 의견이지만, 우리는 WebSims에서 큰 성공을 거두었습니다.native를 사용할 수 없는 경우 jQuery datepicker를 사용하는 것은 깨끗하게 붕괴될 수 있습니다.데모 여기
을 요.<script src="modernizr.js"></script><head>섹션을 클릭하면 스크립트가 클래스를 추가하여 현재 브라우저에서 지원되는 경우 또는 지원되지 않는 경우 두 경우를 구분할 수 있습니다.
또한 이 스레드에 게시된 링크를 따릅니다.Firefox 및 Internet Explorer에서 HTML5 입력 유형 날짜, 색상, 범위 지원
Chrome Version 50.0.2661.87m는 변수에 할당된 경우 mm-dd-yy 형식을 지원하지 않습니다.yy-mm-dd를 사용합니다.IE와 Firefox는 예상대로 작동합니다.
내가 찾은 최고의 쉽고 효과적인 해결책은 다음 브라우저에서 작업하는 것입니다.
- 구글 크롬
- 파이어폭스
- 마이크로소프트 엣지
사파리
<!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>
Two-Script-Include-Solution (2019):
스크립트 섹션에 Better-Dom 및 Better-Date input-Polyfill만 포함하면 됩니다.
영국 dd/mm/yyyy 형식을 유지하면서 문제가 있었습니다. 처음에는 아데노 https://stackoverflow.com/a/18021130/243905 의 답변을 사용했지만 사파리에서는 작동하지 않아 jquery-ui datepicker, jquery validation을 사용하여 작업 전반을 알 수 있는 이것으로 변경했습니다.
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;
}
}
<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>
언급URL : https://stackoverflow.com/questions/18020950/how-to-make-input-type-date-supported-on-all-browsers-any-alternatives
'source' 카테고리의 다른 글
| 후행 공백이 있는 Windows 7(윈도우 7)에서 폴더를 삭제할 수 없습니다. (0) | 2023.09.17 |
|---|---|
| 대신 index.js의 요구 사항을 모든 공용에서 사용할 수 있는 동적 가져오기()로 변경합니다.JS 모듈 (0) | 2023.09.17 |
| jQuery - 단순 입력 유효성 검사 - "공백" 및 "공백하지 않음" (0) | 2023.09.17 |
| 열을 삭제하려고 하면 오류 1025(HY000)가 발생합니다....(오류: 150) 이름 변경 시 오류 발생 (0) | 2023.09.17 |
| 모듈 'AppModule'에서 선언한 예기치 않은 값 '정의되지 않음' (0) | 2023.09.17 |