如何在字段焦点上显示datepicker？ [英] How to show datepicker on field focus only?

问题描述

我要添加 jquery移动日期选择器，但它默认显示日期选择器。

在页眉中添加了

p>

 < link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery .mobile-1.2.0.min.css/> 
< link rel =stylesheethref =/ css / jquery.ui.datepicker.mobile.css/> 
< script src =http://code.jquery.com/jquery-1.8.2.min.js>< / script> 
< script> 
 // reset type = date input 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>日期输入：< / label> 
< input type =datename =dateid =datevalue =/>不幸的是，目前它不能做，除非你是一个非常不好的人。愿意自己实现它。 jQuery Mobile datepicker从来没有打算正式发布为一个小部件（也许有一天，但它从来没有正式宣布）。 
 
 
 
你可以自己检查一下，这里是一个代码snipet，在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}））; 
}）; 
}）; 
  
你可以自己改变它，但什么是点。如果没有时间进行自定义实现，请查看这些第三方jQuery Mobile日期选择器：
 
 
 
第一个是Mobi选择： http://mobipick.sustainablepace.net/demo.html 。简单，容易和健壮。只是你需要的一个。 
 
 
 
 
可能最好的一个是： http：// mobiscroll.com/ 。它曾经是我最喜欢的（仍然是如果我需要良好的UI）。 
 
 
 
 
还有一个很棒的一个是Datebox： http://dev.jtsage.com/jQM-DateBox2/ 。也强大但小越野车。 
 
 
 
另请参阅我的其他类似文章： http://stackoverflow.com/a/13779992/1848600  
 
I'm adding jquery mobile date picker but it shows the date picker by default. Instead, I want it to show up only on focus and to be hidden when the field loses focus...Any idea how ?

In the page header 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=""  />   

解决方案
Unfortunately currently it can't be done unless you are willing to implement it yourself. jQuery Mobile datepicker was never intended to be officially released as a widget (maybe some day but it was never officially announced). Available code is nothing more then a wrapper around jQuery UI datepicker.

You can check it by yourself, here's an code snipet that shows a datepicker on 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 whats the point. In case you don't have time for custom implementation take a look at these 3rd party jQuery Mobile date pickers:

First one is Mobi Pick: http://mobipick.sustainablepace.net/demo.html. Simple, easy and robust. Just the one you need. My favorite.
Probably best one is : http://mobiscroll.com/. It used to be my favorite (still is if I need good UI). Mostly because it is robust with an excellent UI.
Also an excellent one is Datebox: http://dev.jtsage.com/jQM-DateBox2/. Also robust but little buggy. 
Also take a look at my other similar article: http://stackoverflow.com/a/13779992/1848600

                        
这篇关于如何在字段焦点上显示datepicker？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！