javascript - 如何多次使用时间选择器

Question

我有 2 个 Controller 用于设置时间，我有一个 javascript 方法链接到其中一个 Controller 。我只想知道如何将此方法用于具有 2 个不同 ID 的 2 个 Controller 。谢谢

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

HTML

<div class="col-md-2">
    <div class="form-group">
        <label class="title_lable">From:</label>
        <input id="time1" type="text" class="form-control input-sm" ng-model="from">
    </div>
</div>
<div class="col-md-2">
    <div class="form-group">
        <label class="title_lable">To:</label>
        <input id="time2" type="text" class="form-control input-sm" ng-model="to">
    </div>
</div>
<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>

以及如何在 angularjs $scope 中捕获值提前致谢

Answer 1

只需阅读有关它的文档:https://github.com/jonataswalker/timepicker.js

需要使用数组语法来使用多个元素。
然后，您可以将时间存储在一个对象中。

查看此工作片段:

var times = {}; // Added to initialize an object

var timepicker = new TimePicker(['time1', 'time2'], {
  theme: 'dark',
  lang: 'en'
});

timepicker.on('change', function(evt){
  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;
  
  //Added the below to store in the object and consoling:
  var id = evt.element.id;
  times[id] = value;
  console.clear();
  console.log(times); // Display the object
});

<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 class="col-md-2">
  <div class="form-group">
    <label class="title_lable">From:</label>
    <input id="time1" type="text" class="form-control input-sm" ng-model="from">
  </div>
</div>
<div class="col-md-2">
  <div class="form-group">
    <label class="title_lable">To:</label>
    <input id="time2" type="text" class="form-control input-sm" ng-model="to">
  </div>
</div>

希望对您有所帮助。