I have successfully replicated your problem and found s solution.
Your problem comes from picture placed in your header left side. For some reason datebox will cause header and footer to change its height when a date is selected. If you remove the logo this problem will disappear. But of course you can't remove a company logo.
So to fix your problem you should remove data-position="fixed"
from your header but leave it in your footer. You only really need it in the footer. This will solve your problem.
EDIT :
My advice is go with this date picker: http://mobiscroll.com/
It can be customized much much better then Datebox not to mention it has a different mobile platform skins so it can look like native Android or iOS datepicker. Not to mention there are skins for older and newer Android and iOS versions.
More info:
If you want to find more about jQuery Mobile date pickers take a look at this article.