ember.js - Binding an ember model's date attribute to month/day/year select tags -

i have ember model date attribute store user's birthday. bind value of attribute 3 html select tags (one month, day, , year), don't know how. since data stored on model timestamp, it's not simple binding html element straight model property.

i'm using ember 1.12 , ember-cli. i've looked emberx-select constructing , binding actual select , option elements, i'm not sure how bind each select distinct piece of date attribute.

thanks help.

you cant directly connect model using ds.attr(date),but can create js date 3 inputs, , assign date models attribute

since ember going path of data down actions up, in example built component fires datechanged event everytime inputs updated valid date

http://emberjs.jsbin.com/vuyoso/edit?html,js,output

app.indexcontroller = ember.controller.extend({   date:new date(2001,2,2),   actions:{     datechanged:function(date){       this.set('date',date);     }   } });  app.dateinputcomponent = ember.component.extend({   day:null,   month:null,   year:null,    ondatechanged:function(){       var date = new date(this.get('year'), this.get('month'), this.get('day'));       if(date !== 'invalid date'){         this.sendaction('datechanged',date);       }   }.observes('day','month','year') });     <script type="text/x-handlebars" id="components/date-input">    day:{{input value=day}}<\ br>    month:{{input value=month}}<\ br>    year:{{input value=year}}<\ br>   </script>    <script type="text/x-handlebars" data-template-name="index">      {{date-input datechanged="datechanged"}}   {{date}}   </script> 

to go date day,month,year

use ember computed transform date object

model :

export default ds.model.extend({    date:ds.attr('date'),    year:ember.computed('date',function(){return this.get('date').getyear()}    month:ember.computed('date',function(){return this.get('date').getmonth()}    day:ember.computed('date',function(){return this.get('date').getday()} }) 

or component:

{{my-component date=date}}

export default ember.component.extend({    year:ember.computed('date',function(){return this.get('date').getyear()}    month:ember.computed('date',function(){return this.get('date').getmonth()}    day:ember.computed('date',function(){return this.get('date').getday()} })