Question

我在手机中检测并禁用jQuery日期选择器时遇到一个小问题。我有这个JavaScript代码（启用datepicker）：

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

和CSS（隐藏Chrome原生日期选择器）：

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/

我想从移动设备中的jQuery日期选择器中退出。

Answer 1

您可以使用CSS @media查询来隐藏移动视口上的元素。将断点调整为所需值，767px用作示例，因此当视口高于该值时，它应该是可见的，并且在隐藏下方时。确保在CSS文件的末尾设置查询。

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

在移动设备上停用jQuery datepicker，输入类型=＆＃34;日期＆＃34;

1 个答案: