bootstrap-datepicker.js and jquery.maskedinput.js don't play nice

Question

I have to use bootstrap-datepicker.js for my project but it doesn't work well with mask.

problem 1: It you you are tabbing through fields it will auto populate the date field with today's date. Ideally it won't populate it at all.

Problem 2: It's difficult to blank-out a the date field once it's populated.

first name: <input type="text">
birthdate:  <input type="text" class="date">
city:       <input type="text">

js:

$(function() {
    $(".date").mask("99/99/9999");
    $('.date').datepicker({
        format: 'mm/dd/yyyy'
    });
});

The problem is all originates from the fact that mask is populating the field with example format characters( "_ _ / _ _ / _ _ _ _" ) during focus and when the focus leaves datepicker is attempting to parse the example characters BEFORE mask has a chance to remove them. datepicker can't parse these special characters into a date therefore it is selecting today's date.

I think that if I can figure out a way to remove the example characters before bootstrap-datepicker attempts to parse them my problem would be fixed.

I would provide a jsfiddler example but I can't figure out how to add bootstrap-datepicker.js and jquery.maskedinput.js on their site.

Thanks for your help.

Solution 1

I stumbles across this option:

$('.date').datepicker({
        format: 'mm/dd/yyyy',
        forceParse: false
    });

Surprising that force parse is true by default. darn bootstrap. Problem fixed.

Solution 2

Late answer but this was the only one that worked for me after deconstructing the sequence of events handled by both plugins (as of this date).

var $date = $('.date');

$date.datepicker({
    format: 'mm/dd/yyyy'
});
$date.mask("99/99/9999");
$date.on('keyup', function(){
    if ($date.val() == '__/__/____'){
        // this only happens when a key is released and no valid value is in the field. Eg. when tabbing into the field, we'll make sure the datepicker plugin does not get '__/__/____' as a date value
        $date.val('');
    }
});

Long Explanation

Turns out that the datepicker plugin calls an update function on keyup, which in this case is the keyup event triggered when you release the TAB key. This update function calls a DPGlobal.parseDate() function that roughly behaves like this:

DPGlobal.parseDate(''); // returns new Date(); aka. now
DPGlobal.parseDate('10/10/1983'); // returns a Date instance that points to 10/10/1983
DPGlobal.parseDate('__/__/____'); // is generated by the maskedinput plugin and is interpreted as an ilegal date, so the datepicker goes back to the origin of unix time, 1970

This could easily be fixed by changing the parseDate function on the datepicker lib but this is a big no no if you want to keep your code maintainable. We are left then with a hackish way to intercept the foul value and correct it before maskedinput hands it over to the datepicker.

Hope it helps!