как использовать Timepicker более одного раза

Question

У меня есть 2 контроллера для установки времени, и у меня есть метод javascript, связанный с 1 из контроллеров. Я просто хочу знать, как использовать этот метод для 2 контроллеров с 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 $ Заранее спасибо

Answer 1

 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;
    });

Answer 2

Просто прочитайте документацию об этом: 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>

Надеюсь, это поможет.

Answer 3

Попробуйте

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;

        });