jquery - 为什么我无法在日期选择器文本框中输入内容？

Question

我稍微调整了日期时间选择器的工作方式。它在选择更改时触发。

但现在我无法在文本框中输入内容。我不仅将文本框用于日期时间，还让用户在我的应用程序中输入其他类型的信息。

如何让用户在此文本框中键入内容？因此所有其他设置保持不变。日期选择器仅在选择更改时触发。不是点击文本框本身。

jsfiddle sample

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;}​

Answer 1

您的代码默认禁用您的输入，并从中创建日期时间选择器“按钮”，这就是为什么您无法在输入字段中打印文本的原因:

$('#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/