我稍微调整了日期时间选择器的工作方式。它在选择更改时触发。
但现在我无法在文本框中输入内容。我不仅将文本框用于日期时间,还让用户在我的应用程序中输入其他类型的信息。
如何让用户在此文本框中键入内容?因此所有其他设置保持不变。日期选择器仅在选择更改时触发。不是点击文本框本身。
html代码
<input id="datetime" type="text" name="datetime" value="" >
<select size=5>
<option value="not">Not this one</option>
<option value="not">Not this one</option>
<option value="not">Not this one</option>
<option value="datetimepicker">Select date and time</option>
</select>
JavaScript代码
$('#datetime').datetimepicker({
showOn: "button",
});
$('option[value=datetimepicker]').click(function() {
$('#datetime').datetimepicker('show');
});
CSS代码
.ui-datepicker-trigger{display:none;}
最佳答案
您的代码默认禁用您的输入,并从中创建日期时间选择器“按钮”,这就是为什么您无法在输入字段中打印文本的原因:
$('#datetime').datetimepicker({
showOn: "button",
});
让我们进一步看看:
$('option[value=datetimepicker]').click(function() {
// This part of code will work when you click inside SELECT field
}
那么,当您单击 SELECT 内部时,您需要将输入转换为 datetimepicker,对吗?
为此,您只需将 datetimepicker 的初始化移至前一个 block 内即可:
$('option[value=datetimepicker]').click(function() {
$('#datetime').datetimepicker({
showOn: "button",
});
$('#datetime').datetimepicker('show');
});
现在您可以在内部输入,直到按下 SELECT。当按下 SELECT 时,数据选择器启动,输入字段中的文本消失。
这里是修改后的 fiddle :http://jsfiddle.net/dPRjS/9/
更新:
要在关闭日期时间选择器后添加编辑输入的可能性,您需要销毁在字段输入上创建的日期时间选择器,以将其返回到作为输入的可能性:
您需要在单击“输入”字段时激活此操作:
$('#datetime').click(function(){
$('#datetime').datetimepicker( "destroy" );
});
工作更新 fiddle :http://jsfiddle.net/dPRjS/10/
关于jquery - 为什么我无法在日期选择器文本框中输入内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11075541/