为什么我不能在datepicker文本框中键入内容? [英] Why can't I type into datepicker textbox?

问题描述

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

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

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

jsfiddle示例

html代码

 <输入id ="datetime" type =文本" name ="datetime" value ="><选择尺寸= 5>< option value ="not">不是这个</option>< option value ="not">不是这个</option>< option value ="not">不是这个</option>< option value ="datetimepicker">选择日期和时间</option></select> 

javascript代码

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

css代码

  .ui-datepicker-trigger {display:none;} 

解决方案

此代码默认情况下会禁用您的INPUT，并从中设置datetimepicker按钮"，这就是为什么您不能在INPUT字段内打印文本的原因:

  $('#datetime').datetimepicker({showOn:按钮"，}); 

让我们再看一遍:

  $('option [value = datetimepicker]').click(function(){//当您在SELECT字段中单击时，这部分代码将起作用} 

因此，当您在SELECT内部单击时，需要将输入转换为datetimepicker，对吗?

为此，您只需将datetimepicker的初始化移动到上一个代码块中即可:

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

现在，您可以输入内部输入，直到按SELECT键.按SELECT时，数据选择器将启动，并且您在INPUT字段中的文本也会消失.

此处修改为小提琴: http://jsfiddle.net/dPRjS/9/

---

已更新:

要增加在关闭datetimepicker之后编辑INPUT的可能性，您需要销毁字段INPUT上创建的datetimepicker，以将其返回为INPUT的可能性工作:

当您点击输入"字段时，您需要激活此操作:

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

正在更新的小提琴: http://jsfiddle.net/dPRjS/10/

I tweaked little bit how datetime picker works. It is triggered on change of select.

But now I cannot type into the text box. I use the text box not only for date time but to let user input other type of information in my application.

How can I make user to type into this text box? So all other settings stay as it is. Datepicker is triggered only on select change. Not on clicking the textbox itself.

jsfiddle sample

html code

<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 code

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

css code

.ui-datepicker-trigger{display:none;}​

解决方案

This your code disable your INPUT by default and make datetimepicker "button" from it, that why you can't print text inside INPUT field:

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

Let's look further:

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

So, you need to transform your input into datetimepicker when you click inside SELECT, true?

To do this, you just move inicialization of datetimepicker inside previouse block:

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

Now you can type inside input, untill SELECT was pressed. When SELECT was pressed, datapicker starts and your text in INPUT field disappear.

Here is modified fiddle: http://jsfiddle.net/dPRjS/9/

---

UPDATED:

To add possibility to edit INPUT after datetimepicker was closed, you need to destroy created datetimepicker on field INPUT, to return it to possibility work as INPUT:

You need to activate this action when you click on INPUT field:

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

Working updated fiddle: http://jsfiddle.net/dPRjS/10/

这篇关于为什么我不能在datepicker文本框中键入内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！