how do i add a datepicker for a backgrid cell

Question

I am working on backgrid to achieve grid functionality where i have a requirement to add a datepicker to a backgrid cell instead of using the Backgrid.DateCell. Awaiting for you response

samplecode:

           datagrid(collection) : {

                      colomns = [{

                                name : "name",
                    label: "Name",
                    cell : string
                                },
                                {

                                name : "date",
                    label: "Date",
                    cell : string
                                }
                              }],
                        var lgrid = new Backgrid.Grid({
                    columns: columns,
                    collection: collection,
                    emptyText: "no data"
             });
                   this.$("#grids").append(lgrid.render().$el);

                     }

these are columns defined in backgrid.I need to populate date in the string cell using datepicker when i click on the string cell of date a datepicker should be opened by which i need to pick the date into the cell. Please help me out....

Thanks & Regards gangadhar v

Answer 1

There maybe better way to implement it, but I was able to do it like this.

MyDatePickerCell = Backgrid.Cell.extend({
    editor: MyDatePickerCellEditor,
});

MyDatePickerCellEditor = Backgrid.InputCellEditor.extend({
    events:{},
    initialize:function(){
        Backgrid.InputCellEditor.prototype.initialize.apply(this, arguments);
        var input = this;
        $(this.el).datepicker({
            onClose: function(newValue){
                var command = new Backgrid.Command({});
                input.model.set(input.column.get("name"), newValue);
                input.model.trigger("backgrid:edited", input.model, input.column, command);
                command = input = null;
            }
        });
    },
});

Answer 2

onClose does not trigger at the first time I select a date. After second try it works perfectly. I couldn't figure out how to fix this.