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.

Answer 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.