javascript - 调用同一个 JavaScript 函数 timepicker 两次

Question

我在两次调用相同的 javascript 函数时遇到问题。当我运行代码时，第一个 id="time"的输入字段有效，但第二个 id="time1"的输入字段不起作用。

var timepicker = new TimePicker('time', {
  lang: 'en',
  theme: 'dark'
});
timepicker.on('change', function(evt) {

  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;
});


var timepicker1 = new TimePicker('time1', {
  lang: 'en',
  theme: 'dark'
});
timepicker1.on('change', function(evt1) {

  var value1 = (evt1.hour || '00') + ':' + (evt1.minute || '00');
  evt1.element.value = value1;
});

<link href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js">
</script>
<div>
  <input type="text" id="time" placeholder="Time">
</div>
<input type="text" id="time1" placeholder="Time">
</div>

Answer 1

您必须指定目标数组。 所以你的代码看起来像这样:

var timepicker = new TimePicker(['time','time1'], {
  lang: 'en',
  theme: 'dark'
});
timepicker.on('change', function(evt) {
  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;
  console.log(value);
});

<link href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js">
  </script>
<input type="text" id="time" placeholder="Time">
<input type="text" id="time1" placeholder="Time">