How to show datepicker only on field focus?

Question

I add jquery mobile date picker , but by default it displays date picker . Instead, I want it to display only on focus and hide when the field loses focus ... Any idea how?

In the page title, I added

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="/css/jquery.ui.datepicker.mobile.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script> //reset type=date inputs to text $( document ).bind( "mobileinit", function(){ $.mobile.page.prototype.options.degradeInputs.date = true; }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="/js/jQuery.ui.datepicker.js"></script> <script src="/js/jquery.ui.datepicker.mobile.js"></script> 

and a date field in the body to make it work:

 <label for="date">Date Input:</label> <input type="date" name="date" id="date" value="" /> 

Answer 1

Unfortunately, this is currently not possible if you do not want to implement it yourself. jQuery Mobile datepicker was never planned to be officially released as a widget (perhaps someday, but it was not officially announced). Available code is nothing more than a wrapper around jQuery UI datepicker.

You can check it yourself, there is snipet code here that shows the datupixer on the pagecreate event:

 $( ".ui-page" ).live( "pagecreate", function(){ $( "input[type='date'], input:jqmData(type='date')" ).each(function(){ $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) ); }); }); 

You can change it yourself, but what's the point. If you don't have time for a custom implementation, take a look at these third-party jQuery mobile developers:

• First select Mobi Pick: http://mobipick.sustainablepace.net/demo.html . Simple, lightweight and reliable. Only the one you need. My favorite.

• Probably the best one: http://mobiscroll.com/ . It used to be my favorite (still if I need a good interface). Mostly because it is reliable with a great interface.

• Also great is Datebox: http://dev.jtsage.com/jQM-DateBox2/ . Also reliable but small buggy.

Also take a look at my other similar article: fooobar.com/questions/1469226 / ...