Materialize Date Picker automatically hide after opening problem on chrome
You should use the latest version of cdnjs, currently you were using 0.97.5, even older than the beta release.
<!-- 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
Datepicker:
HTML
<input type="text" class="datepicker">
JQuery
$('.datepicker').datepicker({
selectMonths: true,
selectYears: 15
});
The previous one was working for me, no idea why it wasn't in your case.
Check the latest Datepicker/Timepicker docs.
CodePen Working Demo
I had the same problem and solved like this way:
$('.datepicker').on('mousedown', function preventClosing(event) {
event.preventDefault();
});
Solution for datepicker
$('.datepicker').on('mousedown',function(event){
event.preventDefault();
})
Solution for selectbox
Delete this code in materialize.min.js
$(this).trigger('open', ['focus']);
or
a(this).trigger("open",["focus"]);