代码之家 › 专栏 › 技术社区 › naspy971

物化日期选择器覆盖jQuery日期选择器

materialize jquery-ui jquery

naspy971 · 技术社区 · 7 年前

我使用Materialize CSS作为我的CSS框架,但我需要特别使用jQuery UI datepicker,所以我在js文件中写了这一行:

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

即使在jQueryUIJS之前调用MaterialJS,我仍然会得到MaterializeDatePicker。

以下是我的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>

谢谢

1 回复 | 直到 7 年前

Bahman Parsa Manesh 7 年前

首先,请不要通过CDN链接到materialize.css和.js文件。 init.js 并链接到项目中存在的materialize.js和.css文件。在那之后 init.js

materialize\docs\js\init.js

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

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

这会导致Materialize Datepicker不可用。

Adam Starrh 6 年前

如果其他人遇到这种情况,MaterializeVersion1将不再需要jQuery进行实例化。在这种情况下,最好的做法是确保您使用的是最新版本,并遵循给出的示例 in their docs

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.datepicker');
  var instances = M.Datepicker.init(elems, options);
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Nuñito Calzada · JQuery在spring boot和Thymelaf中从DB自动完成

2 年前

Connor · 使用jquery UI幻灯片制作周围动画

2 年前

provance · 如何获得最新版本的jquery ui?

2 年前

Akhilesh · 当数据目标中有分号或冒号时,带有展开的aria的Button元素不展开

3 年前

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

8 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

8 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

8 年前

Paili · 如何在jQuery自动完成中添加其他内容?

8 年前

monu · 动态嵌套选项卡创建

8 年前