如何仅在字段焦点上显示日期选择器？答案

【问题标题】：How to show datepicker on field focus only?如何仅在字段焦点上显示日期选择器？
【发布时间】：2013-01-21 16:55:20
【问题描述】：

我正在添加jquery mobile date picker，但它默认显示日期选择器。相反，我希望它只显示在焦点上，并在字段失去焦点时隐藏起来......知道怎么做吗？

在我添加的页眉中

<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>

以及正文中的日期字段以使其工作：

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

【问题讨论】：

标签： javascript jquery jquery-mobile calendar jquery-ui-datepicker

【解决方案1】：

不幸的是，除非您愿意自己实施，否则目前无法完成。 jQuery Mobile datepicker 从来没有打算作为一个小部件正式发布（也许有一天，但它从未正式宣布）。可用代码只不过是 jQuery UI 日期选择器的包装。

你可以自己检查，这里有一个代码片段，它在 pagecreate 事件中显示了一个日期选择器：

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

您可以自己更改它，但重点是什么。如果您没有时间进行自定义实现，请查看这些 3rd 方 jQuery Mobile 日期选择器：

第一个是 Mobi Pick：http://mobipick.sustainablepace.net/demo.html。简单、容易且坚固。正是您需要的那个。我的最爱。
可能最好的一个是：http://mobiscroll.com/。它曾经是我最喜欢的（如果我需要好的 UI 仍然是）。主要是因为它具有出色的 UI 功能。
Datebox：http://dev.jtsage.com/jQM-DateBox2/ 也是一个很好的选择。也很强大，但小车。

也可以看看我的另一篇类似文章：https://stackoverflow.com/a/13779992/1848600

【讨论】：