Killilea
Killilea

Reputation: 321

UI datepicker won't close on keys (arrow, enter)

I have a grid that tabs around the page with arrow keys. A couple of fields are date type. On tab or click I replace the contents with a unique input box and then on blur...replace back. ie. inline editing.

the date picker pops up but I can't get it to remove on keys. It won't destroy itself. Thanks for the help in advance.

ctrl.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function (dT) {
    // do work
}
}).focus();


ctrl.on({
'blur': function () {
    //  puts the html back and sets value
    ctrl.datepicker('destroy');
},
'keydown': function (k) {
    if (k.which == 27) {
        $(this).blur();
        return;
    }
    if (k.which == 9) {
        k.preventDefault();
    }
    if (k.which == 13 || k.which == 37 || k.which == 38 || k.which == 39 || k.which == 40 || k.which == 9) {
        $(this).blur();
        that.handleColumnTab(e, k.which);   // this tabs the grid up down left right etc.
        return;
    }
}
});

Upvotes: 0

Views: 90

Answers (1)

daremachine
daremachine

Reputation: 2788

try use hide method instead of $.blur()

http://api.jqueryui.com/datepicker/#method-hide

Upvotes: 1

Related Questions