Материализация Css Timepicker onSelect не работает - PullRequest
Новая
       48

Материализация Css Timepicker onSelect не работает

0 голосов
/ 30 апреля 2018

Я пытаюсь использовать Timepicker из materializecss . Мне нужно использовать событие onSelect , но ничего не происходит.

Это HTML: 

<input type="text" name="time" class="timepicker">

Это JavaScript: 

$(document).ready(function(){
    $('.timepicker').timepicker({
        onSelect:function(hour,minute){
           alert(hour+" "+minute);
        }
    });
});

Таймер работает очень хорошо, но когда я выбираю время и час, ничего не происходит. Нет ошибки в консоли и не отображается предупреждение ... Я пытался с событием onCloseEnd , но тоже ничего не происходит.

Мне нужна помощь!

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Я пробую это время с изменением и тоже не работает потому что входное значение равно ''.

0 голосов
/ 30 апреля 2018

Кажется, документация неверна. Я проверил materialize.js и обнаружил, что timepicker не связывал ни одно событие, такое как onOpenStart, onSelect и onCloseEnd, но DatePicker сделал.

Этот фрагмент показывает, что то же событие, но только привязка к DatePicker. 

$('.timepicker').timepicker({
  onSelect: function(time) {
    console.log(time)
  }
});

$('.datepicker').datepicker({
  onSelect: function(time){
    console.log(time)
  }
});
.timepicker-modal,
.datepicker-modal{
  top: -5% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<input type="text" name="time" class="timepicker">

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

Вот демонстрационная версия, показывающая, что ни одно из событий, упомянутых в документации, не сработало (они даже не были зарегистрированы, потому что в таймпайере нет опций event.)

timepicker
enter image description here

DatePicker
enter image description here

$('.timepicker').timepicker({
  onOpenStart: function(){
    console.log('onOpenStart')
  },
  onOpenEnd: function(){
    console.log('onOpenEnd')
  },
  onCloseStart: function(){
    console.log('onCloseStart')
  },
  onCloseEnd: function(){
    console.log('onCloseEnd')
  },
  onSelect: function(){
    console.log('onSelect')
  },
});

$('.timepicker').on('change', function() {
  console.log('change: ' + this.value)
})
.timepicker-modal{
  top: -5% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<input type="text" name="time" class="timepicker">

Единственный способ добиться успеха - использовать change() событие.

...