Question

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

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

如何让用户输入此文本框？所以其他所有设置都保持不变。仅在选择更改时触发Datepicker。不是单击文本框本身。

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

这个代码默认禁用你的INPUT并从中创建datetimepicker“按钮”，这就是你无法在INPUT字段中打印文本的原因：

$('#datetime').datetimepicker({
    showOn: "button",
});

让我们进一步看看：

$('option[value=datetimepicker]').click(function() {
  // This part of code will work when you click inside SELECT field
}

因此，当您在SELECT中单击时，需要将输入转换为datetimepicker，是吗？

要做到这一点，你只需在previouse块中移动datetimepicker的inicial化：

$('option[value=datetimepicker]').click(function() {
    $('#datetime').datetimepicker({
        showOn: "button",
    });
    $('#datetime').datetimepicker('show');
});

现在您可以输入内部输入，直到按下SELECT。按下SELECT时，datapicker启动，INPUT字段中的文本消失。

这是修改过的小提琴：http://jsfiddle.net/dPRjS/9/

更新：

为了增加在datetimepicker关闭后编辑INPUT的可能性，你需要在字段INPUT上销毁创建的datetimepicker，使其返回到INPUT可能的工作状态：

单击INPUT字段时需要激活此操作：

$('#datetime').click(function(){
     $('#datetime').datetimepicker( "destroy" );
 });

更新小提琴：http://jsfiddle.net/dPRjS/10/

为什么我不能输入datepicker文本框？

1 个答案:

更新：