Grow your CSS skills. Land your dream job.

jQuery Date Selector

  • # July 26, 2010 at 2:30 am

    I have a Date text field and when it is focused a calendar selector pops up underneath is. using jquery I am trying to hide it when the mouse is clicked outside of both the field and the calendar selector itself. This is the code ive got that doesn’t seem to work.

    Code:
    hideIfClickOutside: function(event) {
    if (event.target != this.input[0] && !this.insideSelector(event)) {
    this.hide();
    };
    },
    insideSelector: function(event) {
    var offset = this.dateSelector.position();
    offset.right = offset.left + this.dateSelector.outerWidth();
    offset.bottom = offset.top + this.dateSelector.outerHeight();
    alert(offset.right);
    return event.pageY < offset.bottom &&
    event.pageY > offset.top &&
    event.pageX < offset.right &&
    event.pageX > offset.left;
    },

    With this code, I got to click on the date selector and the calendar disappears. I don’t think it is getting the correct position for some reason. It may be because of my css but I cannot change that.

    Any help? Thanks.

    # July 26, 2010 at 5:20 am

    You would think this would work:

    Code:
    hideIfClickOutside: function(event) {
    if( event.target == $(‘.date_input’)) {
    this.show();
    }
    if( event.target != $(‘.date_input’) && event.target != $(‘.date_selector’)) {
    this.hide();
    }
    },

    …but it doesn’t.

    # July 27, 2010 at 1:01 am

    anybody please? =)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".