Reference the current DOM element from inside event handler functions (pickadate.js)

Question

So I'm using http://amsul.ca/pickadate.js/ and I'm trying to reference a date object in the DOM from within any of the pickadate event handlers.

For example I want to be able to say:

onClose: function() {
    var $this = ?; // <-- How do I define $this?
    $this.fadeOut();
}

Question:

How do you refer to the current DOM element from inside one of these event handler functions?

Note:

this, $(this) and $this don't seem to work :-(

Code:

var dates = $('.dates');

dates.pickadate({
    today: t,
    format: f,
    clear: false,
    min: min,
    max: max,
    selectYears: sy,
    selectMonths: sm,
    firstDay: fd,
    formatSubmit: f2,
    hiddenSuffix: s,

    onClose: function() {
        var $this = ?; // <-- How do I define $this?
        $this.fadeOut();
    }
});

Mmm... I found this `Within scope of all six of these events, this refers to the picker.` at the end of this page http://amsul.ca/pickadate.js/date/ — R Lam, Dec 01 '15 at 09:23

score 1 · Answer 1 · answered Dec 01 '15 at 09:31

1

Based on the returned object, I suspect that what you are looking for is:

onClose: function() {
    var $this = this.$holder;
    $this.fadeOut();
}

answered Dec 01 '15 at 09:31

1cgonza

1,589
10
20

You're definitely on to something there. this.$root.parent().hide() successfully hides the parent container of the pickadate element. The same for this.$holder.parent().parent().hide(); – Donal.Lynch.Msc Dec 01 '15 at 09:41
So what you are saying is that this.$root is actually what you were looking for? Meaning, in datepicker.js events, this = this.$root? If you figured it out maybe you can post the answer to the question yourself ;) – 1cgonza Dec 01 '15 at 09:54

score 1 · Accepted Answer · answered Dec 01 '15 at 10:18

1

Try this:

onClose: function() {
    this.trigger().$node.fadeOut()
}

answered Dec 01 '15 at 10:18

Pedram

828
9
24

You can also write "debugger" statement in the first line of your function and using "chrome dev tools" to achieve better solution: onClose: function() { debugger; this.trigger().$node.fadeOut() } – Pedram Dec 01 '15 at 11:07

Reference the current DOM element from inside event handler functions (pickadate.js)

2 Answers2