如何多次使用时间选择器

Question

我有 2 个用于设置时间的控制器，并且我有一个链接到 1 个控制器的 javascript 方法。我只想知道如何将此方法用于具有 2 个不同 ID 的 2 个控制器。谢谢

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

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

查看这个工作的 sn-p：

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>

希望对你有帮助。

Answer 2

试试

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;

    });


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

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

        });

Answer 3

 var timepicker = new TimePicker(['time1', 'time2'], {
        theme: 'dark', // or 'blue-grey'
        lang: 'pt' // 'en', 'pt' for now
    });
    timepicker.on('change', function (evt) {
        console.info(evt);

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