Date Picker component

Very basic date picker to test components

by Emmanuel Mie

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.6/ember-data.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>


<script type="text/x-handlebars" data-template-name="application">
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <div class="panel-title">
Date Picker Component
      </div>
    </div>

    <div class="panel-body">
        {{date-picker date=myDate}}
    </div>
   
    <div class="panel-footer">
        Control : {{myDate}}
    </div>
  </div>
</div>
</script>

CSS

body {
    padding-top: 50px;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Em.Controller.extend({
    myDate: moment('2012-07-04')
});

App.DatePickerComponent = Em.Component.extend({
    attributeBindings: ['value', 'type'],
    classNames: ['form-control'],
    tagName: 'input',
    type: 'date',
    date: null,
    format: 'YYYY-MM-DD',
    
    value: function() {
        var date = this.get('date'),
            format = this.get('format') || 'YYYY-MM-DD';
        return moment(date).format(format);
    }.property('date'),
    
    change: function() {
        var value = this.$().val();
        console.log('date changed :', value);
        this.set('date', moment(value));
    }
});