Binding problem using data-picker, color-picker, time-picker, etc.

I’m just starting to work with CanJs (2.1.4) with the JQuery(1.11.2) version. And found a problem when I’m using control-pickers like inputs with the can-value attribute. When the value of the picker is changed typing by hand, everything work well, but the problem appears when the value is changed from the picker, because the input field is updated but the model is not.

Some idea how to fix this?

Here is the code:

1.                          {{#selectedCollectionType}}
                           <div class="modal-body">
                               <form role="form">
   
                                   <div class="form-group">
                                       <label>Id</label>
                                       <input class="form-control" id="disabledInput" type="text" can-value="id" placeholder="Id automàtica" disabled>
                                   </div>
                                   <div class="form-group">
                                       <label for="Name">Nom</label>
                                       <input type="text" class="form-control" id="Name" can-value="Name" placeholder="Intoduir nom">
                                   </div>
                                   <label for="Name">Color</label>
                                   <div class="input-group demo2">
                                       <input type="text" value="" class="form-control" can-value="Color" id="Color" placeholder="Seleccionar color" />
                                       <span class="input-group-addon"><i></i></span>
                                   </div>
                               </form>
                           </div>
2.                         {{/selectedCollectionType}}

1.     var CollectionType = can.Model.extend({
           findAll: 'GET /api/collectionType',
           findOne: 'GET /api/collectionType/{id}',
           create: 'POST /api/collectionType',
           update: 'PUT /api/collectionType/{id}',
           destroy: 'DELETE /api/collectionType/{id}'
       }, {});
   
   
       can.Component.extend({
           tag: 'collectiontypes-app',
           scope: {
               selectedCollectionType: null,
               collectionTypes: new CollectionType.List({}),
   
               editCT: function (CT) {
                   this.attr('selectedCollectionType', CT);
                   $('#myModal').modal();
               },
               saveCT: function (CT) {
                   var isNew = CT.isNew();
                   CT.save();
                   this.removeAttr('selectedCollectionType');
               
                   if (isNew === true) {
                       this.attr("collectionTypes").push(CT);
                   }
                   $('#myModal').modal('hide');
               },
               newCollectionType: function (CT) {
                   this.attr('selectedCollectionType',  new CollectionType({Name: ''}));
   
               },
               deleteRequested: function (CT) {
                   this.attr('selectedCollectionType', CT);
                   $("#deleteQuestionModal").modal();
               },
               deleteCT: function (CT) {
                   CT.destroy();
                   $("#deleteQuestionModal").modal('hide');
               }
           }
       });
   
       $("#list").html(can.view("appMustache", {}))
       $('.demo2').colorpicker();