2

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

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

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

jsfiddle 示例

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

1 回答 1

2

您的代码默认禁用您的 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，对吗？

为此，您只需将 datetimepicker 的初始化移动到之前的块中：

$('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 的可能性：

当您单击输入字段时，您需要激活此操作：

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

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

于 2012-06-17T23:53:03.840 回答