Материализация css сборщик даты не работает - PullRequest
Новая
       32

Материализация css сборщик даты не работает

0 голосов
/ 04 февраля 2020

Я использую CDN, а не jQuery. Это всего 1 индексный файл, все CDN. Ничего не происходит, когда я нажимаю на кнопку выбора даты. Мой индекс. html это 

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <input type="text" class="datepicker">

    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var elems = document.querySelectorAll('.datepicker');
            var instances = M.Datepicker.init(elems, options);
        });
    </script>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Просто наткнулся на эту проблемную копию + вставку со страницы материализации, я удалил «опции», и после жесткого обновления всплыло окно выбора даты sh. 

 var instances = M.Datepicker.init(elems);
0 голосов
/ 08 февраля 2020

@ Река верна - проблема здесь в объекте параметров, на который есть ссылка, но который не объявлен. Вот инструкция из документов: 

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

  // Or with jQuery

  $(document).ready(function(){
    $('.datepicker').datepicker();
  });

https://materializecss.com/pickers.html

Объект параметров (ключ: пары значений) не требуется, если вы не инициализируете компонент с некоторыми опциями - например, увеличить диапазон дат с 10 до 20 лет. Таким образом, вы можете либо удалить объект параметров: 

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

, либо объявить ваши параметры: 

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

Я запросил изменение в документах, но пока он не был получен разработчиками Канал Gitter полон людей, спрашивающих, почему такой-то компонент не работает, когда они использовали точный код из документации.

...