Multiple Calendars Displayed or Value Selected not displaying correctly

问题

Ok I'm using the jQuery Mobile Framework and adding the Experimental Date Picker but I encounter two results. Following the instructions on the page, this is what I have so far.

Code Efforts #1:

$(document).ready(function() {        
    $('.hasDatepicker').hide();

    $('#date-of-birth').each(function() {     
        $(this).focus(function() {
            $(this).next().show('fast');
        });

        $(this).blur(function() {               
           $(this).next().hide('fast');
        });
    });
});

Now this shows the one calendar (as I would like) but on date selection the date stays the same (it's todays date) and not the date selected.

Code Efforts #2:

$(function() {
    $('.hasDatepicker').hide();

    $('#date-of-birth').focus(function() {
        $('.hasDatepicker').show('fast');
    });

    $('#date-of-birth').blur(function() {
        $('.hasDatepicker').hide('fast');
    });
});

Now this show multiple calendars (5 to be exact) stacked on top of one another and also if I select the date it works as expected. But I only want one calendar to display.

I would like to combine the two code efforts to get the desired results but nothing really seems to be working.

Here is the HTML

<div data-role="fieldcontain">
    <label for="date-of-birth">Date of Birth</label>
    <input type="date" name="date-of-birth" id="date-of-birth" />                
</div>

The type="date" is how you call the date picker

Any tips?

Other Stack Links that might shed some light

Link 1
Link 2

UPDATE:

Well this might be the issue but still haven't found a solution.

I using the Multi-page layout option for jQueryMobile, For each page it creates an additional date-picker but it displays them stack on each other and the functionality doesn't work correctly