그래서 여기 내 해결책이 있습니다 (John Vance의 대답과 유사).
먼저 여기로 이동하여 모바일 브라우저를 감지하는 기능을 가져옵니다.
http://detectmobilebrowsers.com/
그들은 당신이 모바일에 있는지 감지하는 많은 다른 방법을 가지고 있으므로 당신이 사용하고있는 것과 작동하는 것을 찾으십시오.
HTML 페이지 (의사 코드) :
If Mobile Then
<input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
<input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
JQuery :
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max
});
});
이렇게하면 최소 및 최대 날짜를 설정하는 동안 모바일에서 기본 날짜 선택기를 계속 사용할 수 있습니다.
ios 용 chrome과 같은 모바일 브라우저가 "데스크톱 버전을 요청"하는 경우 모바일 검사를 우회 할 수 있고 여전히 키보드가 표시되지 않도록하려는 경우 모바일이 아닌 필드는 읽기 전용이어야합니다.
그러나 필드가 읽기 전용이면 필드를 변경할 수없는 것처럼 사용자에게 보일 수 있습니다. CSS를 변경하여 읽기 전용이 아닌 것처럼 보이게 할 수 있지만 (예 : 테두리 색상을 검은 색으로 변경) 모든 입력 태그에 대해 CSS를 변경하지 않는 한 모양을 일관성있게 유지하기가 어렵습니다. 브라우저.
날짜 선택기에 달력 이미지 버튼을 추가하기 만하면됩니다. JQuery 코드를 약간 변경하십시오.
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
참고 : 적합한 이미지를 찾아야합니다.