Semantic UI Ember Calendar Component

ui-calendar.hbs

{{!-- app/templates/components/ui-calendar.hbs --}}
<div class="ui input {{if icon 'left icon'}}">
  <i class="{{icon}} icon"></i>
  <input type="text" placeholder="{{placeholder}}" />
</div>

ui-calendar.js

// app/components/ui-calendar.js
import Ember from 'ember';
import UiBase from 'semantic-ui-ember/mixins/base';

export default Ember.Component.extend( UiBase, {
  module: 'calendar',
  classNames: ['ui', 'calendar'],

  icon: 'calendar',
  placeholder: 'Date',

  getSemanticIgnorableAttrs() {
    return ['date','icon','placeholder'];
  },

  willInitSemantic( settings ) {
    settings.type = 'date';
    this._super( ...arguments );
  },

  didInitSemantic() {
    this._super( ...arguments );
    let date = this.get('date');
    if ( date ) {
      this.$().calendar('set date', date);
    }
  }

});