why jquery datepicker doesn't work on textarea but only on input

Question

Please help me, i'm clueless. when I try to open the date picker of the jquery UI and attach it to input tag it works perfectly, but when i try to attach it to textarea nothing is happens.

<script type="text/javascript">
     $(function() {    $("#${data_picker}").datepicker();  });
</script>

---- This will work ----
<input id="data_picker" />

---- This doesn't work ----
<textarea id="data_picker"></textarea>

why???

p.s of course they're not in the same page together, it's only the input or only the textarea in the page.

Answer 1

Short version: datepicker just isn't supported with a <textarea> element, specifically it's supported with <span> and <div> elements for inline mode and only <input> elements otherwise. Here's the relevant code doing these checks:

var nodeName = target.nodeName.toLowerCase();
var inline = (nodeName == 'div' || nodeName == 'span');
if (!target.id) {
  this.uuid += 1;
  target.id = 'dp' + this.uuid;
}
var inst = this._newInst($(target), inline);
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
if (nodeName == 'input') {
  this._connectDatepicker(target, inst);
} else if (inline) {
  this._inlineDatepicker(target, inst);
}

Answer 2

I implemented a way to make datepicker work for textareas in my app.

I added a input text field in my html code, with style="display:none" so that this field will be hidden, but the calendar button is displayed as an image. the user clicks on the image and when he selects a date, I have the 'onSelect' function implemented below that will add the value to a text area. I think the original implementation uses .append() to add the value to an input text.. this is why it doesn't work for textareas... my solution is using val() and it worked as expected for me, so I'm sharing it with you

jQuery(inputEl).datepicker({
        showOn: "button",
        buttonImage: "../image/calendar.gif",
        buttonImageOnly: true,
        buttonText: "",
        onSelect: function(selectedDate) {
            var textStr = jQuery(txtAreaEl).val();
            textStr = selectedDate;
            jQuery(txtAreaEl).val(textStr);
        } 
    });