Question

I am using the DateBox ( http://dev.jtsage.com/jQM-DateBox/ ) plugin for a page with the latest build of JqueryMobile but am finding an odd bug.
When I open my app on index.html and navigate through the pages to the page with the date picker is I get this – http://cl.ly/19022K40472e3k0D0D2H

However if I go direct to the page via the address bar it works fine and shows up as it should.

So just wondering is anyone else having problems with this? Or any idea how to fix it?

Also I might add does anyone know how I can have the current date show in the text field?

Thanks.

Answer 1

1) Looks like it is a problem with the css of datebox not being loaded properly.Are you loading the CSS of datebox in index.html?.In that case,when you directly go to the page with the datepicker,CSS might not be loaded.You can check if datebox css is loaded by using firebug for firefox or the in built developer tool in Chrome/Safari.(Check the resources tab to see all the loaded resources)

2)Check this example – http://jsfiddle.net/BNsPB/. In this example I wrote the code in document ready,in your case you might have to write it in pageinit or pagecreate event handlers

After checking your actual code I think you have to add the above code snippet in the pageshow event handler like this:(Assuming bookingPage is the id of the page)

$("#bookingPage").live( 'pageshow',function(event, ui){
  var today = new Date();
    var todayStr = today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
    $('#mydate').trigger('datebox', {'method':'set', 'value':todayStr});
     });
});