-1

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

在我添加的页眉中

<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=""  />
4

1 回答 1

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 日期选择器：

  1. 第一个是 Mobi Pick： http: //mobipick.sustainablepace.net/demo.html。简单、容易且坚固。正是您需要的那个。我的最爱。

  2. 可能最好的一个是： http: //mobiscroll.com/。它曾经是我最喜欢的（如果我需要好的 UI 仍然是）。主要是因为它具有出色的 UI 功能。

  3. Datebox 也是一个很好的选择：http: //dev.jtsage.com/jQM-DateBox2/。也很强大，但小车。

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

于 2013-01-21T17:45:14.157 回答