Средство выбора даты Materialisecss не работает

Я впервые использую materializecss в своем веб-приложении, и у меня возникают проблемы с датчиком. Это вообще не работает.

Я импортировал файлы materialize.css и js и использую код

<div>
 <input type="date"  class="datepicker" />
</div>

и добавлен код script

 $(document).ready(function() {
    $('select').material_select();


    window.picker = $('.datepicker').pickadate({

        selectYears: 16, // Creates a dropdown of 15 years to control year
        format: 'yyyy-mm-dd'
    });



});

но ничего не сработало, показывает отключенное текстовое поле.

Также я хочу знать, как добавить таймер в materializecss?


material-design datepicker materialize
person Sibin Francis    schedule 12.03.2016    source источник

Ответы (2)


arrow_upward
9
arrow_downward

У меня такая же проблема. Моя проблема была решена с понижением jquery до 2.1.4. Кажется, что по какой-то причине datetimepicker и jquery 2.2.1 не работают вместе.

ура Томас

person Thomas    schedule 18.03.2016
comment
То же самое верно и для jquery-2.1.1.min.js (версия, которую они используют в начальном шаблоне. Просто используйте версию 2.1.4, предложенную @Thomas - person didierCH; 08.01.2019

arrow_upward
6
arrow_downward

Прежде всего, вам нужно проверить версию вашего Materialise css и javascript, также не забудьте проверить версию jquery и использовать код инициализации в вашем пользовательском инициализирующем javascript.

проверьте мой код в init.js для инициализации, CSS и JS Materialise через cdn

$(document).ready(function() {
    
    $('.modal').modal();
    //this are my init
    $('#dtp').datepicker();
    $('#dtp').setDate(new Date());
});
<html>
  <head>
    <!-- this is my CSS via cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>
    <div class="row">
      <form class="col s12 m6 card">
        <div class="row center">
          <h4>Materialize DateTime Picker</h4>
          <div class="input-field col s12 m12">
            <input id="dtp" type="text" class="datepicker">
            <label for="dtp">Birthday</label>
          </div>
        </div>
      </form>
    </div>
    
    <!-- this is my JS via cdn -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

Ознакомьтесь с документацией на веб-сайте Materialize, она всегда полезна для таких программистов, как я. Надеюсь, этот ответ поможет вам

Попробуйте запустить мой фрагмент кода

person Dio Lantief Widoyoko    schedule 09.04.2018
comment
Это немного странно: когда я загружаю начальный шаблон materializecss, средство выбора даты не работает. Я всегда получаю ошибку datepicker is not a function. Когда я использую ваш код сверху, он работает. Спасибо! - person didierCH; 08.01.2019