1

I was asked to develop a custom date time picker with angular.

My first thought was to develop a custom component, which would have a single input type text element and a div which would be invisible (this div would contain the calendar, hours, cancel and apply buttons).

When user focus on the input the div appears then the user selects date and time and then clicks button apply the div hides again and finally the input receives the values selected by the user.

My problem here is how the end user of this component gets its date a time values?

I thought implementing an output parameter and then listen to it, but it does not seems like an elegant solution.

And other problem would be if the end user wants to style the input. He would not be formatting the input it self but all the component i'm guessing...

I would rather like to develop an implementation which would make use a directive, since i would be able to manipulate the input value itself and then the end user would just bind to the value property. But for my understanding directives can not have templates...

Can you please tell me which would be a better solution to this conceptual problem?

Thank you

--------------------------------------------------------------------------------Added 11/12/18

I took a first look at both approaches, and for my understanding they seem very similar, although neither accomplishes what i want. I will try to explain my self better. I'm creating a new component which is made up of N html elements.

But the input one is the primary and the one i would like to be able to styling from outside just as a regular html element. <my-component class="form-control"> since the rest of the component is a calendar which will be looking always the same no matter what.

Also other thing i would like to do and which is possible with directive is to directly access value property. For now i'm accomplishing it like <my-component [(value)]="date">

I'm very rookie to angular, so i'm sorry if i'm missing something obvious.

Thank you

Bruno Miguel
  • 1,003
  • 3
  • 13
  • 26
  • 1
    your'e looking for "custom form control", you can see, e.g. https://alligator.io/angular/custom-form-control/ or https://netbasal.com/angular-custom-form-controls-made-easy-4f963341c8e2 – Eliseo Dec 10 '18 at 14:04
  • You could just bind the a property of the component, e.g. `value` to the value of the input. If you're looking for how to wrap an input in a component or directive, check out how to official Material library accomplishes this: https://github.com/angular/material2/tree/master/src/lib/input – joh04667 Dec 10 '18 at 18:44
  • Thank you for both your replies i will be looking into them today. – Bruno Miguel Dec 11 '18 at 08:48

0 Answers0