CODEWITHSUNDEEP
jquerydatepickermask
Hikari
Hikari

Reputation: 3947

jQuery conflict between datepicker() and mask()

I'm using jquery-ui-datepicker.min.js and http://digitalbush.com/projects/masked-input-plugin/ together in an input:

$("#datepicker").datepicker().mask("99/99/9999");

Using them together allows user to either set date using a visual datepicker or type it inside a masked format (/ and _ chars are visible while typing).

But they are conflicting when user tries to delete the text and clear the input. Once a date is added to the input, if DELETE and then ALT buttons are pressed, the deleted text comes back. Therefore user is unable to unset a date that was provided by server or typed by himself.

I've tried .mask("format", {completed: function}), datepicker's onClose, $().focusout() event. Nothing works to capture the text was deleted and make sure it remains that way.

Upvotes: 1

Views: 9144

Answers (1)

Hikari
Hikari

Reputation: 3947

lol I fixed it!

    $("#datepicker").datepicker().mask("99/99/9999");
    $("#datepicker").keyup(function(e){
        if(46==e.keyCode || 8==e.keyCode || 9==e.keyCode){
            var $this = $(this);
            if($this.val() == "__/__/____")
                $this.val("");
        }
    });

Everytime DELETE, BACKSPACE (means user wants do delete it) or TAB (means user is leaving the input), this code verifies if text was deleted and mask() added mask text, and if so it clears that text.

As I could understand, mask() adds masked text __/__/____ so that user can type over it, but when datepicker() sees that text it thinks it's an invalid date and replaces it with Now() text. My code intercepts it and clears that text before datepicker() sees it lol.

There's still a problem, if user leaves the input by mouse clicking elsewhere, the problem still happens sometimes. I could try focusout() or something, but I won't try it now.

Upvotes: 4

Related Questions