Selecting days 1-11 of the month changes the format in the display field from DD/MM/YYYY to MM/DD/YYYY

[abueloshika]

<div class="col-sm-3"><label>Date From:</label>{{pikaday-input locale=en value=dateFrom format='DD/MM/YYYY' class="form-control" name="dateFrom" onSelection=(action 'onChangeDateFrom') }}</div>
In the date field using the above code, if a user selects a date between the 1st and 11th of the month the format of the date in the displpay field reverts from DD/MM/YYYY to MM/DD/YYYY. The date picker then behaves as if this is the selected date (ie if the user clicks back into the field, it will display the month from the MM/DD/YYYY format.)

I have these values being placed as query parameters in the URL string and they are inserted there correctly in a DD-MM-YYYY format, but even if the param is correct the field still displays the MM/DD/YYYY format.

[thiberaw]

check my comment in #162

[abueloshika]

Thank you for your response but I'm not quite sure how I can implement your recommendation in the above. I don;t have a fixed value I can pass in the moment(value) section because this is happening immediately when a user clicks into the date field.

Are you able to provide any advice on implementing your solution to the helper code in the OP?

[afriqs]

Hi,
Same issue here but we found that ember-pikaday works well with DD-MM-YYYY and DD*MM*YYYY format but not with DD/MM/YYYY (it reverses to MM/DD/YYYY): perhaps an interpretation issue with / 🤔

[abueloshika]

Thanks for your comment afriqs, I think you've helped me resolve my issue.

I think the problem was caused by the transform I was doing in my action using a variable called 'dateFrom'. See below

//helper
 {{pikaday-input format='DD-MM-YYYY' locale=en class="form-control has-success" options=(hash numberOfMonths=3 mainCalendar="right") value=dateFrom
              placeholder="Date From" name="dateFrom" onSelection=(action 'onChangeDateFrom') }}

//action

    onChangeDateFrom(selectedValue) {
      this.set('dateFrom', moment(selectedValue).format('DD-MM-YYYY'))
   },

Using the above, as soon as my URL param was set, subsequent clicks into the component exhibited the behaviour described in the OP. 05-10-2018 was treated like 10-05-2018.

I changed the name of 'dateFrom' to simply 'Testing' and the problem has resolved.

//action

    onChangeDateFrom(selectedValue) {
      this.set('Testing', moment(selectedValue).format('DD-MM-YYYY'))
   },

Now when I click back into the component the date is handled correctly and I have a much nicer URL