Integration with Angular 2: datepicker not closing after button is clicked

[MohammedTaha]

Hi there, thank you for developing such a nice component. I'm using jv-datepicker-dialog, can you please help me (update readme in this case will be a much better option) that how can I define a click handler on Ok and Cancel button.

Looking forward to get a helping answer. Thank you so very much, Regards.

[motss]

@MohammedTaha Did you mean that you want to override the click handler on those buttons?

[MohammedTaha]

@motss yeah, I actually want to override the click handlers.

[motss]

@MohammedTaha Is there any reason you want to do that?

[MohammedTaha]

@motss I'm using this component in an angular2 App. Now its my need to get the date out of datepicker component so that I may use the selected date in my model. Furthermore, the datepicker opens due to the text field which is inside paper-dialog. Now the dismiss-dialog isn't working as it should. May be the overlay on another overlay is root of the evil.

[motss]

@MohammedTaha Wow, it sounds cool. You're using Polymer + Angular2?

Furthermore, the datepicker opens due to the text field which is inside paper-dialog.

Just to confirm from this bit of info, once a user click on the text field, it will trigger the datepicker to open and the text field itself is inside a paper-dialog (is it a fullscreen dialog?)

Now the dismiss-dialog isn't working as it should.

At this point, the datepicker is not closing once you click on the buttons. Am I right? How about the selected date? Were you able to get the selected date from the date attribute that will output the selected date by the user.

I might be able to provide a solution if you can let me know a few doubts I mentioned above.

[MohammedTaha]

@motss, yes, I am trying to develop an application using Polymer with angular 2.

Yeah, I caught the focus event of a text filed and called the .open() of datepicker. This datepicker and the paper-dialog are siblings to each other and the dialog isn't a full screen element.

Yeah you are right, the datepicker in not closing once I click on any of those supplied buttons neither I am able to get move the date from datepicker to the controller class. I have to put a little more time on it.

[motss]

@MohammedTaha I'm not familiar with the integration of Polymer with Angular 2. But I'm always here to help you sorted out the issue as I'm not sure if that really the problem of the datepicker.

Is there any way that you're able to listen to events fired by the datepicker in Angular 2? If can, can you listen to the property date as the property has notify: true which will fire an event for a value change.

In Polymer, we would do something like that:

  <jv-datepicker-dialog on-date-changed="_dateChangedHandler"></jv-datepicker-dialog>

Somewhere else in the code for that handler function,

_dateChangedHandler: function(ev) {
  console.log(ev.detail.value);
}

That's how we can add a event listener on a custom element, if you are able to do that on Angular 2, you can probably see if there is a change in the date value.

Looking forward to your response on this. :smile:

[MohammedTaha]

@motss, thanks dear. Will let you know in a while :)

[motss]

@MohammedTaha Closing this and feel free to reopen.