Question

我正在添加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=""  />

Answer 1

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

你可以自己检查一下，这是一个代码snipet，在pagecreate事件上显示一个datepicker：

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

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

首先是Mobi Pick：http://mobipick.sustainablepace.net/demo.html。简单，容易和健壮。只是你需要的那个。我最喜欢的。
可能最好的是：http://mobiscroll.com/。它曾经是我的最爱（仍然是如果我需要良好的用户界面）。主要是因为它具有出色的UI功能。
同样出色的是Datebox：http://dev.jtsage.com/jQM-DateBox2/。同样坚固但小马车。

另请查看我的其他类似文章：https://stackoverflow.com/a/13779992/1848600

如何仅在字段焦点上显示datepicker？

1 个答案: