Can't access date in ember-pikaday onSelection from the outside

Question

Has any of you experienced this using the ember-pikaday addon? I would like to set the date from the onSelection to be stored on the selectedDate but the context inside the onSelection is of the addon and not of the component itself. Is there a way I could store the value of date to one of the properties in my component?

My code is like this:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['schedule-nav-date-picker'],
  selectedDate: null,

  onSelection: function(date) {
    this.set('selectedDate', date);
    return date;
  },

  actions: {
    saveClicked () {
        this.sendAction('saveClicked', this.get('selectedDate'));
    },

    cancelClicked () {
      this.sendAction('cancelClicked');
    }

  }
});

And it gives me this error:

pikaday.js:165 Uncaught TypeError: this.get(...) is not a function
at Class.userSelectedDate (pikaday.js:165)
at Class.onPikadaySelect (pikaday.js:151)
at Backburner.run (ember.debug.js:224)
at Backburner.join (ember.debug.js:247)
at Function.run.join (ember.debug.js:15904)
at Pikaday.<anonymous> (ember.debug.js:15966)
at Pikaday.setDate (pikaday.js:815)
at HTMLDivElement.Pikaday.self._onMouseDown (pikaday.js:462)

And this is the template, (we use Emblem for templating):

h1 Select a Date
.form-groups-container.-include-container
  .form-section
    .form-group
      .row
        pikaday-inputless onSelection=onSelection

form-buttons [
  saveLabel='Save'
  cancelLabel='Cancel'
  saveClicked='saveClicked'
  cancelClicked='cancelClicked' ]

Answer 1

One of the main benefits of using action helper is that it automatically prepares this context for you; when you use it. For instance if you pass the function onSelection without the action helper like {{pikaday-inputless onSelection=onSelection}} then "this context" will be the pikaday-inputless component not your own component (parent component) within the handler function onSelection . This is what kumkanillam already mentioned in this comment. So you need to use pikaday-inputless onSelection=(action 'onSelection') for "this context" to be your own component.

I have prepared a very simple twiddle for you to illustrate that using action helper works smoothly. You just need to put your action handler within actions json declaration of your component. Check out my-component in the twiddle. It simply does what I already summarized above. Hope this helps.