I was using JQueryMobile’s experiment Datepicker for a while and it worked in the

Question

0

Asked: June 3, 20262026-06-03T05:23:13+00:00 2026-06-03T05:23:13+00:00

I was using JQueryMobile’s experiment Datepicker for a while and it worked in the

0

I was using JQueryMobile’s experiment Datepicker for a while and it worked in the old framwork. Yesterday i changed the framework to latest one and found that it breaks the layout of the Datepicker when I click outside.

broken layout

Has anyone ecountered same problem?? how did you over come it?? it means datepicker will not be supported in the latest framwork??

My code goes as below

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet"  href="jquery.ui.datepicker.mobile.css" /> 
    <script src="jquery-1.7.2.min.js"></script>



    <script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;

  });

  $(function() {
        $( "#datepicker" ).datepicker();
    });

  </script>
  <script src="jquery.mobile-1.1.0.min.js"></script>
    <script src="jQuery.ui.datepicker.js"></script>
    <script src="jquery.ui.datepicker.mobile.js"></script>
</script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <label for="date">Date Input:</label>
        <input type="date" name="date" id="date" value=""  /> 

        <div id='datepicker'></div>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>