chrome 打开问题后 Materialise Date Picker 自动隐藏

Question

Materialize datepicker 在其他浏览器和旧版本 Google Chrome 中工作正常，但在新版本 Google Chrome[=15 中无法正常工作=]

<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

您应该使用最新版本的 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 2

我已经通过替换 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 3

我遇到了同样的问题，并且是这样解决的：

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

Answer 4

日期选择器的解决方案

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

选择框的解决方案

在materialize.min.js

中删除此代码

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

Answer 5

从 materialize.js

中删除

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

或

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

Answer 6

Chrome 84 select/dropdowns 实现 css 0.100 解决方案：

将调用 hideDropdown() 的超时时间从 0 毫秒更改为 100 毫秒。没有人会注意到它，但它也能完成工作:))

chrome 打开问题后 Materialise Date Picker 自动隐藏

Materialize Date Picker automatically hide after opening problem on chrome

javascript

datepicker

materialize

日期选择器的解决方案

选择框的解决方案