Search code examples
javascriptjquerybackbone.jsunderscore.jsbackgrid

Datepicker onClose event not firing when used as a backgrid editor


I have searched the net and i cannot find any sort of light for this problem. Here is my snippet.

Backgrid.CustomDateCell = Backgrid.DateCell.extend({
    editor: Backgrid.InputCellEditor.extend({
        attributes: {
            type: "text"
          },
        events: {},
        initialize: function(){
            Backgrid.InputCellEditor.prototype.initialize.apply(this, arguments);
            var _input = this;
            $(this.el).prop('readonly', true);
            $(this.el).datepicker({
                autoclose: true,
                todayHighlight: true,
                format: "mm/dd/yyyy",
                viewMode: "months",
                minViewMode: "months",
                onClose: function(dateText, inst){
                    var command = new Backgrid.Command({});
                    _input.model.set(_input.column.get("name"), dateText);
                    _input.model.trigger("backgrid:edited", _input.model, _input.column, command);
                    command = _input = null;
                }
            });
        }
    })
});

So basically, what i want is to trigger backgrid:edited of the backgrid cell model. But it seems that i am missing something here. The onClose event is never called and no error is showing in the console. I also tried the onSelect event but to the same result.

Thanks in advance


Solution

  • As mentioned in the comments:

    This is a bootstrap datepicker, so onClose is not a valid option. Attach a listener to the hide event instead:

            $(this.el).datepicker({
                autoclose: true,
                todayHighlight: true,
                format: "mm/dd/yyyy",
                viewMode: "months",
                minViewMode: "months"
            });
            $(this.el).on("hide", function(e) {
                    var command = new Backgrid.Command({});
                    _input.model.set(_input.column.get("name"), e.date);
                    _input.model.trigger("backgrid:edited", _input.model, _input.column, command);
                    command = _input = null;
                });
    

    e.date should give you the equivalent of dateText