How to make the calendar widget work in each todo

Am completely new to ember js, jquery (UI DESIGN). Am trying to build a todo application where i wanted to give a due date to each todo. Now my problem is, when I Enter a NEW TODO a calendar button appears near by, but when I click inside THE CALENDAR WIDGET doesn’t come. Kindly tell me how to solve it.

datepicker: function() { this.rerender(); }.observes(‘datepicker’) });

TEMPLATE CODING:

**

VIEW CODING:

Todos.TodosView = Ember.View.extend({
// templateName: ‘calendar’, // tagName: ‘input’,
didInsertElement: function() {

  {{each}} 
  {

this.$(“#1”).datepicker(); this.$(“#2”).datepicker(); this.$(“#3”).datepicker(); {{/each}} },

$($('#todo-list').find('li')[0]).css('color','blue');
$( "li" ).on( "click", function() {
$( this ).css( "color", "red" );

},

KINDLY SHARE ME THE CORRECT CODE

**

VIEW CODING:

Todos.TodosView = Ember.View.extend({
// templateName: ‘calendar’, // tagName: ‘input’,
didInsertElement: function() {

  {{each}} 
  {

this.$(“#1”).datepicker(); this.$(“#2”).datepicker(); this.$(“#3”).datepicker(); {{/each}} },

$($('#todo-list').find('li')[0]).css('color','blue');
$( "li" ).on( "click", function() {
$( this ).css( "color", "red" );

},