Ember Cli Bootstrap日期选择器在使用queryParam时格式错误

问题描述

一段时间以来，我一直在使用 Ember-CLI-Bootstrap-Datepicker ，直到现在我使用 queryParams 以获取日期值以进行搜索，可能以paras格式显示：

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)" 

哪个是不正确的？我已经搜索并发现，显然我的日期对象需要转换为 ToString ，但是，我尝试了但仍然存在相同的问题。

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 :

模板：

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

控制器：

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

路线：

  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

示例：

var = new Date（）;今天.toISOString（）; // =>
2016-03-04T09：20：49.447Z使用Date对象的其他方法，您
可以提取年，日，小时等。

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.

查询参数可以不直接绑定到Date对象，因此，您
可以自由将其转换为所需格式的字符串，而且
可以将查询参数字符串转换为一个Date对象。

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.

推荐答案

以下是有此问题的人的答案，我有固定自己。

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

在您的控制器中，只需添加一个新属性 startDateToJSDate 即可将您的日期转换为Moment或适当的格式您可以使用 Ember.computed

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}}

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

此外，您可以简单地添加queryParam替换你的路线或刷新你的mod el

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

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

或

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

而已。现在您的网址就像 tasks？date_due_gteq = 2016-09-01

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.

这篇关于Ember Cli Bootstrap日期选择器在使用queryParam时格式错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！