A monthly datepicker Ember component that wraps Bootstrap datepicker (https://github.com/eternicode/bootstrap-datepicker).

Readme.md

Monthly bootstrap datepicker (Ember component)

A simple monthly datepicker that is bound to a month, and sends an action when a user selects a new month

Here's an example where I use it to control route transitions: http://samselikoff.github.io/talks/2-sep2013-d3-ember-simple-dashboard/part3-data-from-routes.html

Use

Load bootstrap (getbootstrap.com)
Load the datepicker (https://github.com/eternicode/bootstrap-datepicker)

<link rel="stylesheet" href="libs/datepicker.css">
<script src="libs/bootstrap-datepicker.js"></script>

Elsewhere, in Handlebars land...

{{monthly-datepicker 
     month=controller.monthlyReport.date  (some JS Date object)
     action="getMonthlyReport"}}

• Whenever month changes, the datepicker will update.
• When the user selects a new month, an action (in this case, one named getMonthlyReport) will be sent to your app.

MonthlyDatepickerComponent

App.MonthlyDatepickerComponent = Ember.Component.extend({
  classNames: ['dp'],

  didInsertElement: function() {
    var _this = this;
    this.$().datepicker({format: 'M-yyyy',minViewMode: 'months'})
      .on('changeDate', function(e) {
        _this.sendAction('action', e.format());
      });
    
    this.update();
  },

  update: function() {
    if (this.get('month')) {
      this.$().datepicker('update', this.get('month'));
    } else {
      this.$('.month.active').removeClass('active');
    }
  }.observes('month')
});