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"]);