blocks|key|821378|text|如果将输入设置为禁用，键盘将永远不会弹出。比如..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821379|++++<input+type="text"+id="date_picker_field"+name="date"+disabled/>|code-block|syntax|javascript|821380|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you make the input disabled the keyboard never pops up. Like...

<pre><code> &lt;input type="text" id="date_picker_field" name="date" disabled/&gt;
</code></pre>

blocks|key|606285|text|当我在移动设备上测试时，我遇到了同样的情况，在我可以选择日期之前，键盘/小键盘就会弹出来。我刚刚在里面添加了一个属性readonly="true“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|606286|​|606287|但是，一定要编辑CSS并指定cursor:+pointer，因为它会在您每次在桌面视图中悬停时显示一个问号。|606288|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I experienced the same thing where keyboard / keypads pops up before I can pick a date while testing in mobile devices. I just added an attribute readonly="true" inside 



However, be sure to edit CSS and specify cursor: pointer because it shows a question mark every time you hover in desktop view.

blocks|key|821510|text|在我正在开发的一个应用程序上，我也遇到了同样的问题。我注释掉了jQuery文件中的这些行，以防止它在单击日历图标后立即自动将焦点设置在文本字段上。它适用于我的应用程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821511|if+(+$.datepicker._shouldFocusInput(+inst+)+)+{
++++inst.input.focus();
}|code-block|syntax|javascript|821512|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I've been experiencing the same problem on an application I am working on. I commented out these lines from my jQuery file to prevent it from automatically setting focus on the textfield immediately after clicking on my calendar icon. It worked for my application.

<pre><code>if ( $.datepicker._shouldFocusInput( inst ) ) {
 inst.input.focus();
}
</code></pre>

blocks|key|606379|text|我使用的是精简版本v1.11.4，在jquery-ui.min.js中我找到了两次|type|unstyled|depth|inlineStyleRanges|entityRanges|data|606380|datepicker._shouldFocusInput(t)&&t.input.focus()|offset|length|style|CODE|606381|我删除了&&t.input.focus()，它工作得很好。|606382|同样值得关注的可能是：|606383|_shouldFocusInput:function(e){
++return+e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}|code-block|syntax|javascript|606384|仍在寻找不更改核心文件的修复程序...|606385|entityMap^0|0|0|1C|0|4|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|12|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

I had the minified version v1.11.4 and in jquery-ui.min.js I found two times 

<code>datepicker._shouldFocusInput(t)&amp;&amp;t.input.focus()</code>

I removed <code>&amp;&amp;t.input.focus()</code> and it works fine.

Also of interest might be:

<pre><code>_shouldFocusInput:function(e){
 return e.input&amp;&amp;e.input.is(":visible")&amp;&amp;!e.input.is(":disabled")&amp;&amp;!e.input.is(":focus")
}
</code></pre>

Still looking for a fix without changing core files...

blocks|key|821584|text|我找到了一个解决方法，在打开日期选择器之前使用jQuery禁用输入字段，并在100毫秒后启用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821585|$selected+=+$("#datepickerInput");
$selected.prop('disabled',+true);
$selected.datepicker("show");
window.setTimeout(function+()+{
+++$selected.prop('disabled',+false);
},+100);|code-block|syntax|javascript|821586|在Chrome和Android+5.1.1上的cordova上进行了测试。|821587|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found a workaround by disabling the input field with jQuery before open the datepicker and enable it after a 100ms:

<pre><code>$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
 $selected.prop('disabled', false);
}, 100);
</code></pre>

Tested on Chrome and also with cordova on Android 5.1.1.

blocks|key|606490|text|通过将datepicker+showOn选项设置为"none“，达到了预期的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|606491|$(#startdate").datepicker({
++++defaultDate+:+"%2B7d",
++++minDate:+"%2B7d",
++++changeMonth+:+true,
++++changeYear+:+true,
++++yearRange+:+"c:c%2B1",
++++numberOfMonths+:+1,
++++showOn:+"none",
++++dateFormat+:+"dd-MM-yy",
++++onClose+:+function(selectedDate)+{
++++++++$("#startdate").val(selectedDate);
++++++++$(+"#enddate"+).datepicker(+"option",+"minDate",+selectedDate+);
++++}
});|code-block|syntax|javascript|606492|datepicker实现理解showOn选项的“焦点”、“按钮”和“两者”值。默认设置为“焦点”。因此，从技术上讲，传递这3个值以外的任何值都应该是可行的。但是需要注意的是，一旦默认功能被覆盖，管理日期选择器日历的正确显示的责任就落在您身上了。|606493|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Achieved the desired result by setting datepicker showOn option to "none".

<pre><code>$(#startdate").datepicker({
 defaultDate : "+7d",
 minDate: "+7d",
 changeMonth : true,
 changeYear : true,
 yearRange : "c:c+1",
 numberOfMonths : 1,
 showOn: "none",
 dateFormat : "dd-MM-yy",
 onClose : function(selectedDate) {
 $("#startdate").val(selectedDate);
 $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
 }
});
</code></pre>

The datepicker implementation understands "focus", "button" and "both" values for the showOn option. The default is set to "focus". So technically passing any value other than these 3 should work. 
A word of caution though, once the default functionality is overridden, the onus of managing proper display of the date picker calendar lies on you.

blocks|key|821650|text|$('#dateIniPick').datetimepicker({
++++format:+'DD/MM/YYYY',
++++ignoreReadonly:+true,
++++allowInputToggle:+true
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|821651|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('#dateIniPick').datetimepicker({
 format: 'DD/MM/YYYY',
 ignoreReadonly: true,
 allowInputToggle: true
});
</code></pre>

There is an option with the jQuery UI datepicker to only open the datepicker when a button image is clicked. See the following for an example:

<a href="http://jqueryui.com/demos/datepicker/#icon-trigger">http://jqueryui.com/demos/datepicker/#icon-trigger</a>

The problem is that the focus is in the textfield as soon as the datepicker opens. Is it possible to disable the setting of the focus?

When using a page like the above on a mobile device like an iPhone, the keyboard pops up because the textfield gains the focus. This is not really userfriendly since you have to close the keyboard to actually get to the datepicker and use it...

Disable setting of focus for jQuery UI datepicker

jQuery UI日期选择器有一个选项，只在单击按钮图像时打开日期选择器。下面是一个例子：问题是，datepicker一打开，焦点就在文本字段中。是否可以禁用焦点设置？在iPhone等移动设备上使用类似上面的页面时，键盘会弹出，因为文本字段获得了焦点。这并不是真正的用户友好，因为你必须关闭键盘才能真正到达datepic...

问禁用jQuery UI日期选择器的焦点设置
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用jQuery UI日期选择器的焦点设置EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用jQuery UI日期选择器的焦点设置
EN