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

Question

我已经使用 Ember-CLI-Bootstrap-Datepicker 一段时间了，直到现在我都没有遇到任何问题，因为当我使用 queryParams 来获取日期值以用于我的搜索目的时，可能参数中的格式就像:

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

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

如果你们有使用此附加组件的经验，那就太好了，请帮助我弄清楚我的错误是什么。我正在分享部分代码：

模板：

{{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();
    }
  }

这是可能的解决方案 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

这里是给遇到这个问题的人的答案，我已经自己解决了。

在您的控制器中只需添加一个新的属性 startDateToJSDate 即可使用 Moment 将您的日期转换为正确的格式，或者您可以使用 Ember.computed[= 执行任何其他操作16=]

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;
    }
  }),

然后将您的日期选择器输入更改为

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

此外，您可以简单地添加查询参数来替换您的路线或刷新您的模型

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

或

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

就是这样。现在你的 Url 会变成 tasks?date_due_gteq=2016-09-01

我为这个问题苦苦挣扎，但我自己已经解决了它，我想与你分享。希望你能发现这有帮助。

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

Ember Cli Bootstrap Date Picker wrong format while using queryParam

ember.js

ember-cli