Question

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

Answer 1

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/