在Chrome上打开问题后，物化日期选择器会自动隐藏

Question

对日期选择器进行材料化处理在其他浏览器和旧版本的Google Chrome中都可以正常使用，但在新版本的Google Chrome中无法正常工作

<input type="date" class="datepicker">

JS

$('.datepicker').pickadate({

selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});

Codepen Link for Datepicker

Answer 1

我遇到了同样的问题，并以这种方式解决了：

$('.datepicker').on('mousedown',function(event){
    event.preventDefault();
})

Answer 2

日期选择器的解决方案

$('.datepicker').on('mousedown',function(event){
    event.preventDefault();
})

选择框的解决方案

在materialize.min.js中删除此代码

$(this).trigger('open', ['focus']);
or
a(this).trigger("open",["focus"]);

Answer 3

您应该使用最新版本的cdnjs，当前使用的是0.97.5，甚至比beta版本要早。

 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

jQuery：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

日期选择器：

HTML

<input type="text" class="datepicker">

jQuery

$('.datepicker').datepicker({
  selectMonths: true,
  selectYears: 15
});

上一个正在为我工​​作，不知道为什么不在您的情况下。

查看最新的Datepicker/Timepicker文档。

CodePen Working Demo

Answer 4

我已经通过替换material.js中的setTimeout（）函数解决了这一问题。

setTimeout( function() {  
    if (giveFocus == true) {   
        P.$root.removeClass( CLASSES.opened + ' ' + CLASSES.focused )
        aria( P.$root[0], 'hidden', true )
    }
}, 0 )

您必须从CDN下载js文件，然后在文件搜索“ P. $ root.removeClass（CLASSES.opened +''+ CLASSES.focused）”中，然后用上述代码替换该函数。享受：）

Answer 5

从materialize.js删除

$(this).trigger('open', ['focus']);

或

a(this).trigger("open",["focus"]);

Answer 6

Chrome 84选择/下拉菜单，用于实现CSS 0.100解决方案：

将调用hideDropdown（）的超时从0更改为100毫秒。没有人会注意到它，但它也会做这项工作：））