使用（MaterializeCSS），如何在不冻结浏览器的情况下初始化Picker组件？

Question

描述

我正在尝试使用 materialize css 库编写一个小型 to-do list 项目。在我的项目中，我有一个按钮可以触发一个模式，该模式包含一个带有两个选择器元素（日期和时间）的表单。我第一次选择日期或时间时，一切正常，但如果我尝试编辑我的初始选择 - 浏览器会冻结。我使用最新版本的 Firefox。此外，我将选项参数 container 传递给两个选择器，以确保它们使用所有可用的 space 进行渲染，而不是仅使用调用它们的模态提供的 space 。我希望这是有道理的。我做错了什么？如何确保我的浏览器不会冻结执行下面的代码。

文档

Picker

代码

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <title>task manager</title>

    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css'>

    <style>
        button{ width: 100%; }
        input{ text-align: center; }
    </style>
</head>
<body>
    <div class='container'>

        <div class='fixed-action-btn'>
            <button class='btn-floating btn-large red'>
                <i class='large material-icons'>dehaze</i>
            </button>
            <ul>
                <li>
                    <button class='btn-floating green modal-trigger' data-target='add-task'>
                        <i class='material-icons'>add</i>
                    </button>
                </li>
            </ul>
        </div>

        <div class='modal' id='add-task'>
            <div class='modal-content'>
                <h3>NEW TASK</h3>
                <div class='row'>
                    <div class='col s12'>
                        <div class='input-field'>
                            <input id='task' type='text'>
                            <label for='task'>enter task</label>
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col s6'>
                        <div class='input-field'>
                            <input class='datepicker' id='task-date' type='text'>
                            <label for='task-date'>select date</label>
                        </div>
                    </div>

                    <div class='col s6'>
                        <div class='input-field'>
                            <input class='timepicker' id='task-time' type='text'>
                            <label for='task-time'>select time</label>  
                        </div>
                    </div>
                </div>

                <div class='row'>
                    <div class='col s12'>
                        <div class='input-field'>
                            <select id='priority-task'>
                                <option value='low'>low</option>
                                <option value='moderate'>moderate</option>
                                <option value='hight'>high</option>
                            </select>
                            <label for='task-priority'>select priority</label>
                        </div>
                    </div>
                </div>
                <div class='modal-footer'>
                    <button class='btn waves-effect waves-light'>submit</button>
                </div>
            </div>
        </div>

    </div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js'></script>
    <script>
       document.addEventListener('DOMContentLoaded', function(){
           const container = document.querySelector('.container');

           const date_picker = document.querySelector('.datepicker');
           const time_picker = document.querySelector('.timepicker');

           const modal = document.querySelector('.modal');
           const select = document.querySelector('select');
           const menu = document.querySelector('.fixed-action-btn');

           M.FloatingActionButton.init(menu);

           M.FormSelect.init(select);

           M.Datepicker.init(date_picker, {container: container});
           M.Timepicker.init(time_picker, {container: '.container'});

           M.Modal.init(modal);
       });
    </script>
</body>
</html>

Answer 1

这已在版本 1.0.0-rc.1 中修复。在导入实体化样式和脚本时使用这些新的 CDN 链接。

https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.css https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.js

使用（MaterializeCSS），如何在不冻结浏览器的情况下初始化Picker组件？

Using (MaterializeCSS), how to initialize Picker components without freezing the browser?

javascript

css

materialize