Bootstrap Datepicker doesn't return selected dates after changeDate event within Ember.js <p>I created an Ember.js component called <code>date-picker-multi.js</code> using the <a href="https://bootstrap-datepicker.readthedocs.io/en/latest/" rel="nofollow noreferrer">Bootstrap Datepicker</a> JavaScript plugin. I am trying to get the dates within both the input fields (from the date range) whenever the user selects a different date.</p> <p>As per the Bootstrap Datepicker component's <a href="https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#changedate" rel="nofollow noreferrer">changeDate event</a>, I should be able to get both the dates by accessing <code>e.dates</code> however, when I do this, I get an array with just one item in it like this:</p> <pre><code>[Fri Dec 09 2016 00:00:00 GMT+0530 (IST)] </code></pre> <p>This is what my <code>date-picker-multi.js</code> component looks like:</p> <pre><code>import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'div', maxViewMode: 1, autoclose: true, format: null, startDate: undefined, todayHighlight: true, datesDisabled: [], actualDates: null, // Store computer-friendly dates here didInsertElement() { this._super(...arguments); let self = this; // initiate jquery datepicker library let options = { maxViewMode: this.get('maxViewMode'), autoclose: this.get('autoclose'), todayHighlight: this.get('todayHighlight') }; if (this.get('format')) { options.format = this.get('format'); } if (this.get('startDate')) { options.startDate = this.get('startDate'); } if (this.get('datesDisabled') &amp;&amp; Ember.isArray(this.get('datesDisabled'))) { options.datesDisabled = this.get('datesDisabled'); } this.$().datepicker(options).on('changeDate', function(e) { console.log(e.dates); }); }, willDestroyElement: function() { //remove all event handlers on this component this.$().off(); } }); </code></pre> <p>Observe my <code>console.log(e.dates);</code> inside the <code>changeDate</code> event.</p> <p>This is how I am calling the component in my Handlebars file:</p> <pre><code>{{#date-picker-multi class="input-daterange input-group" id="datepicker" format='d MM' actualValues=data.dates}} {{input required="true" type="text" class="input-sm form-control date-icon" name="start" value=data.depart}} &lt;span class="input-group-addon"&gt;to&lt;/span&gt; {{input required="true" type="text" class="input-sm form-control date-icon" name="end" value=data.return}} {{/date-picker-multi}} </code></pre> <p>I can't figure out what the issue is. Does anyone know why this might be happening?</p>