How to integrate the Cumulocity DatePicker Directive into existing App?

Question

i want to know if it is possible to integrate the existing Datepicker Directive from Cumulocity into my Cumulocity App.

Currently it is difficult to use a own datepicker directive because of the older angular version in use.

Best regards,
Meykel

you don't have to use "angular" date pickers out there. from our experience so far, i can say that an angular library wrapping a native one is usually pain to deal with. you should stick with a native javascript datepicker that cumulocity doesn't use, and bind its events to angular yourself instead of relying on 3rd party wrappers. — mostruash, Jul 19 '16 at 12:59
That would work, but if you want the display to be consistent, you'd need to do it manually. — Stilltorik, Jul 19 '16 at 14:57

Stilltorik · Answer 1 · 2016-07-19T12:25:12.413

1

The datepicker used is based on the datepicker popup available here. It is, however, an old version of it.

Here is a basic example of it's use:

<input ng-init="currentDate = new Date(); isPopupOpen = false"
  ng-model="currentDate" datepicker-popup datepicker-append-to-body="false"
  show-button-bar="false" show-weeks="false" is-open="isPopupOpen"
  ng-click="isPopupOpen = !isPopupOpen">

edited Jul 19 '16 at 12:25

answered Jul 19 '16 at 12:15

Stilltorik

1,662
4
19
31

Thank you for providing the initial hint, but sadly this is not helping me. Cumulocity added some specific styling and behavior like time selection. To match the overall look and feel, i want to use the directive made by Cumulocity. – Meykel Jul 19 '16 at 12:31
Which datepicker specifically do you want to reproduce? – Stilltorik Jul 19 '16 at 13:29
As mentioned in the Question, i want to use the datepicker directive created by the [Cumulocity](http://www.cumulocity.com) guys. But you gave me a hint where to look for the directive :D. – Meykel Jul 19 '16 at 14:03
The one above is based on the Cumulocity one. I stripped a few things, but if you tell me which one you want, I can give you an example closer to what you're looking for. – Stilltorik Jul 19 '16 at 14:28
After looking into the minified code from Cumulocity, i was able to find the directive in Question. @Stilltorik Thanks for giving me the hint. – Meykel Jul 21 '16 at 07:18

score 0 · Answer 2 · answered Jul 21 '16 at 08:42

0

The directive in question is called c8yDateTimePicker.
It is restricted to elements and attributes.

<div c8y-date-time-picker ng-model="ctrl.input.dateFrom"></div>

Here some images from the datepicker

Best regards,
Meykel

answered Jul 21 '16 at 08:42

Meykel

123
1
7

How to integrate the Cumulocity DatePicker Directive into existing App?

2 Answers2