Ember.js Bootstrap Date Range

date-range-picker.hbs

{{input type="text" class="form-control date-picker date-start"}}

<span class="input-group-addon">to</span>

{{input type="text" class="form-control date-picker date-end"}}
<span class="clear-button glyphicon glyphicon-remove-circle form-control-feedback"></span>

date-range-picker.js

'use strict';

/**
 * A specialized set of input elements that provide a date range picker.
 *
 * Provides validation on the end date to prevent selecting dates earlier
 * than specified in the start date.
 *
 * Usage:
 * 
 * ```handlebars
 *   {{date-range-picker startDate=myStartVariable endDate=myEndVariable}} 
 * ```
 */
App.DateRangePickerComponent = Ember.Component.extend({
  classNames: [
    'input-group',
    'input-daterange'
  ],

  format: "mm/dd/yyyy",

  register: function () {
    var self = this;

    var options = {
      format:             this.get('format'),
      autoclose:          true,
      todayHighlight:     true,
      keyboardNavigation: false,
      language:           'en'
    };

    // Wire up the datepicker on the startDate input
    this.$().find('.date-start').datepicker(options).on('changeDate', function (ev) {
      // Update the end date
      self.set('startDate', ev.date);

      // Set the endDate input's startDate to the provided value
      self.$().find('.date-end').datepicker('setStartDate', ev.date);

      // If the selected date is newer than the end date, then push it forward.
      var endDate = self.get('endDate');
      if (!Ember.isEmpty(endDate) && endDate < ev.date) {
        self.$().find('.date-end').datepicker('setDate', ev.date);
      }
    });

    // Wire up the datepicker on the endDate input
    this.$().find('.date-end').datepicker(options).on('changeDate', function (ev) {
      self.set('endDate', ev.date);
    });

    // Wire up the clear button on the endDate input
    this.$().find('.clear-button').click(function () {
      self.set('endDate', null);
      $(this).prev('input').val('');
    });

    // Set initial date(s)
    if (!Ember.isEmpty(this.get('startDate'))) {
      this.$().find('.date-start').datepicker('setDate', this.get('startDate'));
    }

    // Set initial date(s)
    if (!Ember.isEmpty(this.get('endDate'))) {
      this.$().find('.date-end').datepicker('setDate', this.get('endDate'));
    }
  }.on('didInsertElement')
});

site.css

.clear-button {
    position:  absolute;
    right:     0;
    top:       0;
    height:    14px;
    margin:    auto;
    font-size: 14px;
    cursor:    pointer;
    color:     #ccc;
}