JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js"></script>
<script src="https://raw.github.com/eternicode/bootstrap-datepicker/master/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<script src="http://stevenlevithan.com/assets/misc/date.format.js"></script>
<script type="text/x-handlebars">
    {{view App.MyView}}
</script>

<script type="text/x-handlebars" data-template-name='myview'>
    <div>
DatePicker: 
    </div>
    <div>
        {{view App.DatePicker dataBinding="xxx" elementId="datepicker"}}
        {{xxx}}
    </div>
</script>

JavaScript

App = Ember.Application.create();

App.DatePicker = Ember.View.extend({
    classNames: ['ember-text-field','input-small'],
    tagName: "input",
    attributeBindings: ['data','value','format','readonly','type','size'],
    size:"16",
    type: "text",
    format:'mm/dd/yyyy',
    value:function(){
        var date = this.get('data');
        
        if(date){
            return date;
        }
        else{
            return "";
        }
    }.property('data'),
    
    
   didInsertElement:function(){
      var self = this;
      
      var onChangeDate = function(ev) {
         console.log($("#datepicker").attr("value"));
         self.set('data', ev.date);
      };
      this.$().datepicker({ format:this.get(this.get('format')) })
          .on('changeDate', onChangeDate);
  }
});

App.MyView = Ember.View.extend({
    templateName: 'myview'
});