Materialize DatePicker overwrites jQuery DatePicker

I use Materialize CSS as my CSS Framework, but I need to use jQuery UI datepicker specifically, so I wrote this one line in my js file :

$('#search_immobilier_date_debut').datepicker();

My issue is that Materialize uses the same jQuery function to instantiate its datepicker, which I don't want.

Even when I call Material JS right before jQuery UI JS, I still get the Materialize datepicker.

Here are my css files :

   <!-- Materialize CSS-CSS-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <!-- jQuery UI CSS-->
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <!-- Custom CSS -->
        <link rel="stylesheet" href="{{ asset("assets/styles-scripts/css/app.css") }}"/>
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Here are my JS files :

<!-- jQuery 3.3 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
            crossorigin="anonymous"></script>

    <!-- jQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
            crossorigin="anonymous"></script>

    <!-- Materialize CSS-JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Custom JS -->
    <script src="{{ asset("assets/styles-scripts/js/app.js") }}"></script>

Thanks

Solution

First of all please don't link to materialize .css and .js files via CDN. You should get Materialize project and include it to your project to access init.jsfile and also link to Materilize .js and .css files that exist in project. After that open init.js from this path in your project :

materialize\docs\js\init.js

Find below line in the file and comment it :

$('.datepicker').datepicker();

This causes Materialize Datepicker being unavailable.