jQuery UI日期选择器有一个选项,只有在单击按钮图像时才会打开它。 请参见以下示例:
http://jqueryui.com/demos/datepicker/#icon-trigger
问题是,当日期选择器打开时,焦点立即在文本字段中。 是否可以禁用设置焦点?
在像iPhone这样的移动设备上使用上述页面时,键盘弹出,因为文本字段获得了焦点。 这不太用户友好,因为您必须关闭键盘才能实际进入日期选择器并使用它......
jQuery UI日期选择器有一个选项,只有在单击按钮图像时才会打开它。 请参见以下示例:
http://jqueryui.com/demos/datepicker/#icon-trigger
问题是,当日期选择器打开时,焦点立即在文本字段中。 是否可以禁用设置焦点?
在像iPhone这样的移动设备上使用上述页面时,键盘弹出,因为文本字段获得了焦点。 这不太用户友好,因为您必须关闭键盘才能实际进入日期选择器并使用它......
将输入设置为只读
<input type="text" id="datePicker" readonly>
$(#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 );
}
});
inputmode="none"
。请注意保留HTML标签。<input type="text" ... inputmode="none" />
我没有进行过全面测试,但在我使用的Android设置中它表现良好。
Original Answer翻译成"最初的回答"
<input type="text" id="date_picker_field" name="date" disabled/>
如果您正在使用jQuery Mobile- 那么您可能想要查看一些移动设备定向的日期选择器。
我正在使用实验性jQueryUI 移动设备日期选择器(来自alpha 4),在尝试了其他几个之后,因为我们想要一个漂亮的日历视图。它基本上只是在现有日期选择器的基础上添加了一些CSS类。我正在使用编辑过的版本,以便它可以作为弹出窗口使用。为了防止键盘打开,我只需在选择器显示之前,在它获得焦点后立即添加一个jQuery模糊事件$this.blur()
。 模糊事件发生得足够快,以至于键盘永远不会打开。
如果没有- 您可能想要做同样的事情。但我不知道有没有不编辑代码的方法。
datepicker._shouldFocusInput(t)&&t.input.focus()
我移除了&&t.input.focus()
,现在它可以正常工作。
另外值得注意的是:
_shouldFocusInput:function(e){
return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}
仍在寻找不更改核心文件的解决方案...
我正在开发的应用程序也遇到了同样的问题。我注释掉了jQuery文件中的这些行,以防止它在单击日历图标后立即自动将焦点设置在文本字段上。对我的应用程序起作用。
if ( $.datepicker._shouldFocusInput( inst ) ) {
inst.input.focus();
}
我在移动设备测试时遇到了同样的问题,即在选择日期之前键盘/键盘弹出。我只需在标签内添加一个属性readonly="true"。
然而,请务必编辑CSS并指定cursor: pointer,因为在桌面视图中每次悬停时都会显示一个问号。
$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
$selected.prop('disabled', false);
}, 100);
已在Chrome上测试,并且在Android 5.1.1上使用cordova进行了测试。
$('#dateIniPick').datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
allowInputToggle: true
});