Need help with timepicker widget

Apps & Services HABPanel
1

I am trying to create a widget with a timepicker using uib-timepicker.
my code so far:

  <div>
    <uib-timepicker class="timepicker timepicker-append-to-body" ng-model="itemValue('timepicker_item')" show-meridian="false">
    </uib-timepicker>
  </div>

it only displays the content of the datetime item “timepicker”, but i can’t change the time.
what is missing to change the datetime? any help is appreciated.

2

made a little progress:

<div class="flex-container">
  <div>
    <uib-timepicker class="timepicker" ng-model="timepicker" show-meridian="false">
    </uib-timepicker>
  </div>
  <div>
    <button class="btn btn-primary" ng-click="sendCmd('timepicker_item', uib-timepicker)">Save</button>
  </div>
</div>

now i can select a time and hit save to send it to the item state, but it sends the wrong time…

If i select “12:00” it sends “13:59” :
Item ‘timepicker_item’ changed from 1916-04-26T11:02:44.389+0000 to 1916-04-26T13:59:41.690+0000

what am i doing wrong?

3

Tried to solve the similar task…
Here my findings.

  1. Add “ng-init” directive to read from datetime Item into widget
  2. On “ng-click” pass formatted datetime value back to Item
  3. If you have issues with TimeZone look at this post.
DateTime timepicker_item "Time picker" <time>

<div class="flex-container">
  <div>
    <ng-init="timepicker=itemState('timepicker_item')" uib-timepicker class="timepicker" ng-model="timepicker" show-meridian="false">
    </uib-timepicker>
  </div>
  <div>
    <button class="btn btn-primary" ng-click="sendCmd('timepicker_item', timepicker | date: 'yyyy-MM-ddTHH:mm:00.0')">Save</button>
  </div>
</div>

In case you still have issues with timezone you can use hardcoded zone value in format like this:

(timepicker | date: 'yyyy-MM-ddTHH:mm:00.0': '+0100')