Ember-pikaday does not update selected date

1

I’m trying to get work ember-pikaday, add-on (version 2.2.4) and without success.

Here is its use in a template component:

#templates/components/holiday-hour.hbs

  <div class="col-sm-2">
    {{pikaday-input value=holidayDate class='form-control' onSelection=(action (mut holidayDate)) readonly="readonly" format="DD/MM/YYYY"}}
  </div>

Here is the CP holidayDate in the component:

#components/holiday-hour.js

export default Component.extend({
  i18n: service(),
  constants: service(),
  holiday: null,
  state: null,
  states: [],
  tagName: '',
  currentLanguage: '',
  shouldDisplayDeleteIcon: false,
....

  holidayDate: computed(function() {
    return this.get('holiday').get('date');
  }),
...

Here is how I call the component template:

#templates/holiday-hours.hbs

<form {{action "updateHolidayHours" on="submit"}}>
      {{#each model as |holidayHour|}}
        {{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true deleteAction=(route-action 'deleteHoliday' holidayHour)}}
      {{/each}}
...

What is wrong with syntax to be able update the holiday date ? When checking the date value of the holiday-hour component in the Inspector, - the date has a correct new value. When submitting the form in updateHolidayHours of the router, the holiday-hour model has always the initial date value :(. Thank you.

2

I replaced the code in the component template as follows:

#templates/components/holiday-hour.hbs

  <div class="col-sm-2">
    {{pikaday-input value=holiday.date class='form-control' onSelection=(action (mut holiday.date)) readonly="readonly" format="DD/MM/YYYY"}}
  </div>

and removed the CP from the component.

Now the date is updated but it is displayed as day - 1, i.e. if I select May 28, 2018, it will display May 27, 2018.

Why so ?

3

FIxed :slight_smile:

I had to add one more option: useUTC=true to be able to save a date correctly:

  <div class="col-sm-2">
    {{pikaday-input value=holiday.date class='form-control' onSelection=(action (mut holiday.date)) readonly="readonly" format="DD/MM/YYYY" useUTC=true}}
  </div>