36265

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 <a href="https://github.com/soulim/ember-cli-bootstrap-datepicker/issues/72" rel="nofollow">https://github.com/soulim/ember-cli-bootstrap-datepicker/issues/72</a>

<blockquote>

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.

</blockquote>

Answer1:

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=<strong>startDateToJSDate</strong> 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.

Recommend

  • jquery ui datepicker error on beforeShowDay
  • BundleConfig not rendered after publish in IIS
  • Windows Azure VM availability/Failover steps
  • Accesing properties in a UserControl from the MainWindow (WPF/MVVM)
  • Using JQuery Datepicker To Only Show Months
  • iOS - How to access the device's file library?
  • How to use java.time.LocalDate on a Play Framework JSON Rest?
  • Year, Month, and Day parameters describe an un-representable DateTime in Persian calender
  • jQuery - how to validate a date of birth using jQuery Validation plugin?
  • jQuery random blockquote
  • A simple datepicker in VueJS
  • How to make Plotly chart with year mapped to line color and months on x-axis
  • Back press fragments issue in android
  • How to parsing NSDate to RFC 822 always use in English?
  • iOS Date formatting
  • Safari PHP form submission -file upload hangs
  • How to link 2 Jquery UI datepickers with Knockout?
  • Is a .txt file created in VB different than one I'd randomly create?
  • jQuery timepicker 'Object does not support this property or method'
  • stop execution in Custom validator if it false
  • Yii2: Using Kartik Depdrop Widget?
  • Best practice for switching iPhone views?
  • Should I be afraid to use UDP to make a client/server broadcast talk?
  • How to Add Polymorphic Comments to Feed?
  • Xaml, wpf image position and crop issue
  • Get localized short date pattern as String?
  • C# - Most efficient way to iterate through multiple arrays/list
  • Consuming a WCF service in a Java Client using wsHttpBinding
  • Getting different value with placeholder over CPU/GPU
  • Parse a date string in a specific locale (not timezone!)
  • jQuery tmpl and DataLink beta
  • SetUp method failed while running tests from teamcity
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Java static initializers and reflection
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app