Date Picker View

Test a basic date-picker as an Ember.View. Working !

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="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script type="text/x-handlebars" name="application">
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <div class="panel-title">
Date Picker View
      </div>
    </div>

    <div class="panel-body">
        {{view 'date_picker' dateBinding=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.DatePickerView = Em.View.extend({
    tagName: 'input',
    classNames: ['form-control'],
    attributeBindings: ['type', 'value'],
    type: 'date',
    date: null,
    _value: null,
    format: 'YYYY-MM-DD hh mm ss',
    value: Em.computed(function(key, value) {
        var date = this.get('date'),
            format = this.get('format'),
            value = moment(date).format(format);
        return value;
    }).property('date'),
    
    change: function(evt) {
        // !! this.get('value') DOES NOT return the input's current value
        var value = this.$().val();
        // updates this.date => bound property
        this.set('date', moment(value));
    }
});