휴대 전화에서 jQuery datepicker를 사용하지 않도록 설정하려면 입력 유형 = "날짜"

휴대 전화에서 jQuery 날짜 선택 도구를 사용하는 데 문제가 있습니다.휴대 전화에서 jQuery datepicker를 사용하지 않도록 설정하려면 입력 유형 = "날짜"

$("input[type='date']").datepicker();

그리고 CSS (크롬을 기본 날짜 선택기를 숨기기) : 나는이 자바 스크립트 코드가 (날짜 선택기를 사용) 바탕 화면에서

input::-webkit-calendar-picker-indicator{ display: none;} 
input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important;}

을,이 잘 작동하지만 휴대폰에 두 개의 날짜 선택기입니다 표시. jQuery Datapicker를 숨기고 싶지만 Modernizr과 같은 스크립트는 사용하지 마십시오.

누군가 CSS 또는 약간의 JavaScript로 나를 도와 줄 수 있습니까?

예제 코드 :

<!DOCTYPE> 
<html> 
<head> 
<title> Datepicker</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<style> 
input::-webkit-calendar-picker-indicator{ display: none;} 
input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important;} 

</style> 
</head> 
<body> 
    <form> 
    <input type="date" /> 
    </form> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 

<script> 
$(function() { 
    $("input[type='date']").datepicker({ 
      dateFormat: "yy-mm-dd", 
      firstDay: 1 }) 
}); 

</script> 
</body> 
</html>

나는 여기에 코드를 삽입 : http://www.stack.puniserv.pl/

I 모바일에서의 jQuery 날짜 선택에서 사임하고자합니다.

출처

2016-12-21 punisher

전체 작동 예제에서 문제를 보여줍니다. – Dekel

@Dekel 내 게시물을 업데이트합니다. 모바일에서는 두 개의 datepicker가 나타납니다. jQuery 날짜 피커 숨기기. – punisher

모바일 뷰포트의 요소를 숨기려면 CSS @media 쿼리를 사용할 수 있습니다. 중단 점을 원하는대로 조정하면 767px이 예제로 사용되므로 뷰포트가 위에 있으면 표시되어야하고 숨겨진 경우가 있어야합니다. CSS 파일 끝에 쿼리를 설정해야합니다.

@media (max-width: 767px) { 
    input::-webkit-calendar-picker-indicator { 
     display: none; 
    } 
    input[type="date"]::-webkit-input-placeholder { 
     visibility: hidden !important; 
    } 
}

출처

2016-12-21 12:50:03 Syden

휴대 전화에서 jQuery datepicker를 사용하지 않도록 설정하려면 입력 유형 = "날짜"

답변

관련 문제