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

我正在添加，但它默认显示日期选择器。相反，我希望它只显示在焦点上，当场失去焦点时隐藏起来……你知道怎么做吗

在我添加的页眉中

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

//重置类型=文本的日期输入
$（document）.bind（“mobileinit”，function（）{
$.mobile.page.prototype.options.degradeInputs.date=true；
});   

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

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

日期输入：

不幸的是，除非您愿意自己实现，否则目前无法实现。jQuery Mobile datepicker从未打算作为一个小部件正式发布（也许有一天，但从未正式宣布）。可用代码只是jQueryUIDatePicker的包装器

您可以自己检查，下面是一个代码片段，在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 }) );
    }); 
});

$（“.ui页面”）.live（“页面创建”，函数（）{
$（“输入[type='date']，输入：jqmData（type='date'）））。每个（函数（）{
$（this）.after（$（“”）.datepicker（{altField:“#”+$（this.attr（“id”），showOtherMonths:true}）；
}); 
});

你可以自己改变，但这有什么意义呢。如果您没有时间进行自定义实现，请查看以下第三方jQuery移动日期选择器：

第一个是Mobi Pick:。简单、简单、健壮。正是你需要的。我最喜欢的

最好的可能是：。它曾经是我的最爱（如果我需要良好的用户界面，现在仍然是）。主要是因为它具有良好的UI和健壮性

还有一个很好的例子是Datebox:。也很结实，但车很小

另请看我的另一篇类似文章：