how to use timepicker more than once

Question

I have 2 controllers for setting time , and I have a javascript method linked to 1 of the controllers. I just want to know how to use this method for 2 controllers with 2 different id. Thanks

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"/>

And how to capture the value in an angularjs $scope Thanks in advance

Takit Isy · Accepted Answer · 2018-07-02T15:44:47.443

Just read the documentation about it: https://github.com/jonataswalker/timepicker.js

You need to use the array syntax to use multiple elements.
Then, you could store the times in an object.

See this working snippet:

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>

Hope it helps.

it works but how to put time1 in an angularjs $scope, thanks — hassanzi, Jul 02 '18 at 15:44
@Hassan I don't know angular, but I've put the values in an object. :) — Takit Isy, Jul 02 '18 at 15:45

score 0 · Answer 2 · answered Jul 02 '18 at 13:34

0

Try

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;

        });

answered Jul 02 '18 at 13:34

Dimitris Siakavelis

1,048
9
10

Uncaught TypeError: Cannot set property 'hour' of undefined at HTMLAnchorElement.i (timepicker.min.js:7) i @ timepicker.min.js:7 – hassanzi Jul 02 '18 at 13:40
https://stackoverflow.com/questions/32609407/html-input-time-in-24-format – hassanzi Jul 02 '18 at 14:21

score 0 · Answer 3 · answered Jul 02 '18 at 15:27

0

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

answered Jul 02 '18 at 15:27

hassanzi

191
17

but how to put time1 value in an angularjs $scope – hassanzi Jul 02 '18 at 15:32

how to use timepicker more than once

3 Answers3