Ember Cli Bootstrap Date Picker wrong format while using queryParam

Question

I have been using Ember-CLI-Bootstrap-Datepicker for a while and I had no issue until now that when I am using queryParams to get Date Value for my search purpose the format in may params would be like :

"date_due_gteq=Thu%20Sep%2001%202016%2000%3A00%3A00%20GMT%2B0800%20(MYT)" 

Which one is incorrect? I have searched and found that apparently my date object needs to be convert to ToString however, I have tried but still have the same problem.

that would be great if you guys have a an experience with this add-on, help me to figure it what is my mistake. I am sharing some part of the code :

Template :

{{bootstrap-datepicker value=date_due_gteq format="yyyy-mm-dd" placeholder="due date (to)" class="form-control" autoclose=true forceDateValue=true}} 

Controller:

  queryParams: [ "date_due_gteq","date_due_lteq"],
  date_due_gteq: null,
  date_due_lteq: null,

Routes:

  model(params) {
    return this.findPaged('task', {
      q: {
        date_due_gteq: params.date_due_gteq,
        date_due_lteq: params.date_due_lteq,
      }
    });
  },
  actions: {
    queryChanged() {
      this.refresh();
    }
  }

this is possible solution from here https://github.com/soulim/ember-cli-bootstrap-datepicker/issues/72

Hey @stonetwig! Because you have a Date object, it's up to you how to transform it into string of any format.

Example:

var today = new Date(); today.toISOString(); // => "2016-03-04T09:20:49.447Z" Using other methods of Date object you could extract year, day, hours, and etc.

Query param could be bound to a Date object not directly, so then you have freedom to transform it into string of required format, and also convert a string of query param into a Date object.

Answer 1

Here is the answer for those who have this issue, I have fixed myself.

In your controller simply add a new property startDateToJSDate which will convert your date to a proper formatting with Moment or maybe you can do whatever else you want using Ember.computed

date_due_gteq: null,
startDateToJSDate: Ember.computed('date_due_gteq', {
    get(key) {
      return this.get('date_due_gteq') ? moment(this.get('date_due_gteq')).toDate() : null;
    },
    set(key, value) {
      this.set('date_due_gteq', value ? moment(value).format('YYYY-MM-DD') : '');
      return value;
    }
  }),

then change your datepicker input to

{{bootstrap-datepicker value=startDateToJSDate format="yyyy-mm-dd" placeholder="due date (from)" class="form-control" autoclose=true forceDateValue=true}}

In Addition, you can simply add your queryParam to replace your route or refresh your model

queryParams: {
    date_due_gteq: { replace: true },
  },

or

  queryParams: {
        date_due_gteq: { refreshModel: true },
      },

that's it. Now your Url will be like tasks?date_due_gteq=2016-09-01

I had a struggling time for this issue however I have fixed it myself and I would like to share it with you. Hope you can find this helpful.