javascriptember.jspikaday

EmberJS - How to update dateFrom Query Param with Pikaday input


I am using the following input from the ember-pikaday addon:

<div class="col-sm-3"><label>Date From:</label>{{pikaday-input value=dateFrom name="dateFrom" class="form-control"}}</div>

I cannot get the value of the input to update the query parameter in the URL. If I use a standard input it works with the following controller:

import Controller from '@ember/controller';

export default Controller.extend({

queryParams: ['dateFrom', 'dateTo', 'unitNumber'],
dateFrom: null,
dateTo: null,
unitNumber: null,

  actions: {
    selected(x){
      module = x
    },

    submitQuery(dateFrom, dateTo, unitNumber){
        switch(module) {
          case 'Option 1':
          this.transitionToRoute('option1', {queryParams: {dateFrom: this.get('dateFrom'), dateTo: this.get('dateTo'), unitNumber: this.get('unitNumber') }})
        break;
    }
   }
  }
});

I suspect I need an action when a date is selected but I do not know how to handle the update within the action. I tried the following:

//onSelection=(action 'select') added to pikday input

select() {
    dateFrom = this.set('dateFrom')
}

But it did not represent in the URL. I think that would be incorrect scoping anyway. I am still very new to Ember (and coding). Any help would be very appreciated.


Solution

  • Here they mentioned how to use this package, https://github.com/edgycircle/ember-pikaday#usage

    {{pikaday-input onSelection=(action 'doSomethingWithSelectedValue')}}
    

    In your case, you need to update the selected value from pikaday input to dateFrom property of the controller.

    {{pikaday-input value=dateFrom name="dateFrom" class="form-control" onSelection=(action 'onChangeDateFrom') }}
    

    define actions in the controller actions hash,

    onChangeDateFrom(selectedValue)
    {
     this.set('dateFrom',selectedValue);
    }