jquery - Materialise DatePicker 覆盖 jQuery DatePicker

Question

我使用 Materialise CSS 作为我的 CSS 框架，但我需要专门使用 jQuery UI datepicker，所以我在我的 js 文件中写了这一行:

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

我的问题是，Materialize 使用相同的 jQuery 函数来实例化其日期选择器，这是我不想要的。

即使我在 jQuery UI JS 之前调用 Material JS，我仍然可以获得 Materialize 日期选择器。

这是我的 css 文件:

   <!-- 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">

这是我的 JS 文件:

<!-- 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>

谢谢

Answer 1

首先，请不要通过 CDN 链接到 Materialize .css 和 .js 文件。 您应该获取 Materialize 项目并将其包含到您的项目中以访问 init.js 文件，并链接到项目中存在的 Materilize .js 和 .css 文件。之后从项目中的此路径打开 init.js :

materialize\docs\js\init.js

在文件中找到以下行并对其进行注释:

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

这会导致 Materialise Datepicker 不可用。