没有document.ready函数的jqueryUI日期选择器

Question

To create jquery datepicker, we use the following function

 $( function() {
    $( "#datepicker" ).datepicker();
  } );
<input type="text" id="datepicker">

I am trying to achieve a in-line editing functionality with a new record function as below

function createRowForAdd(){
    var tRow = "<tr>"
    for(var i = 0; i < array.length; i++){
        var jsonObj = array[i];
        tRow +="<td><input type='text' id='"+jsonObj.id+"'  /></td>" 
    }
    tRow += "</tr>";
    return tRow;
}

    function Add(){
      var tRow  = createRowForAdd();
      $("#tblId tbody").append(tRow); 
}

<button id="btnAdd" onclick="javascript:Add()">New</button>  
<table id="tblId" border="1">   
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Birth Date</th> 
                <th>Joining Date</th> 
                <th></th> 
            </tr>
        </thead>
    <tbody>
    </tbody>
    </table> 

One or more columns may contain a date field. For those column(s), I would like to show a date picker. As I understand, document.ready function gets triggered once the DOM is ready. Is it possible to initiate a date picker on row add?

Answer 1

.datepicker() function just needs that the element is in the DOM, so you can execute it after you add the row without problems, applying your desired selector for that input fields.

About the selector, considering that you're going to have multiple datapicker inputs, avoid using the same id (id's are designed to be unique in the DOM). You better use a class instead.

function Add() {
    var tRow  = createRowForAdd();
    $("#tblId tbody").append(tRow);

    // When creating the row, set class="datepicker" the inputs of the row that
    // has to be converted to a datetime picker. Then you just have to do this...
    $("input.datepicker").datepicker();
}

Or even better, apply it only to the inputs from the new added row (the last one)...

function Add() {
    $("#tblId tbody").append(createRowForAdd()).find('tr:last input.datepicker').datepicker();
}

EDITED : I can't see the value of your array variable, but looking at your code it looks like all the inputs of the same column will have the same id . As I mention earlier, avoid that because id's are designed to be unique in the DOM. If you need an id, you can use the row number to change the input for every id. Here you have an example with that idea...

HTML :

<button id="btnAdd">New</button>  
<table id="tblId" border="1">   
  <thead> 
    <tr> 
      <th>Name</th> 
      <th>Birth Date</th> 
      <th>Joining Date</th> 
      <th></th> 
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JQUERY :

// I'm making up the content of this array. The question doesn't show it.
var array = [
    { 'id': 'name', 'class': '' },
    { 'id': 'birthdate', 'class': 'datepicker' },
    { 'id': 'joiningdate', 'class': 'datepicker' },
    { 'id': 'something', 'class': '' }
];

function createRowForAdd(rowPos) {
    var tRow = [];
    for (var i=0, l=array.length; i<l; i++)
        tRow.push('<td><input type="text" id="'+array[i].id+rowPos+'" class="'+array[i].class+'" /></td>'); 
    return '<tr>' + tRow.join('') + '</tr>';
}

$('button#btnAdd').click(function() {
    var rowPos = $("table#tblId tbody tr").length;
    $("table#tblId tbody").append(createRowForAdd(rowPos)).find('tr:last input.datepicker').datepicker();
});

And the fiddle... https://fiddle.jshell.net/rigobauer/tpxnvpy4/

I hope it helps