jqueryUI datepicker in wrong cell Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of jqueryUI datepicker in wrong cell without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I noticed a strange behavior in my table. I populate a table from JSON data, each row contains 3 cells. A checkbox followed by two data cells. This works like charm. Further I added the default jQueryUI datepicker, which should appear if the last cell is clicked. But instead the last cell the datepicker appears if the checkbox at the row beginning is clicked.

Any idea why?

var dates = [
  {
                "reason": "Date 1",
                "date": "01.01.2021"
            },
            {
                "reason": "Date 2",
                "date": "04.04.2021"
            },
            {
                "reason": "Date 3",
                "date": "08.08.2021"
            },
            {
                "reason": "Date 4",
                "date": "12.12.2021"
            }
]

 var table = document.getElementById("date-table")

createDateTable(dates)

function createDateTable(dates) {
       table.innerHTML = "";
        for (var i = 0; i < dates.length; i++) {
            dateRow =   `<tr id="row-${i}">
                            <td><input type=checkbox></td>
                            <td contenteditable='true'>${dates[i].reason}</td>
                            <td>${dates[i].date}</td>
                        </tr>`
            table.innerHTML += dateRow
        }


        $("#date-table tr").each(function () {
            $(this).find("td :last").datepicker({
                dateFormat: "dd.mm.yy",
                showOtherMonths: true,
                selectOtherMonths: true
            })
        })
    }
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
    <table id="date-table">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>


</body>

</html>

Answer

You need to use input to make it work like:

var dates = [{
    "reason": "Date 1",
    "date": "01.01.2021"
  },
  {
    "reason": "Date 2",
    "date": "04.04.2021"
  },
  {
    "reason": "Date 3",
    "date": "08.08.2021"
  },
  {
    "reason": "Date 4",
    "date": "12.12.2021"
  }
]

var table = document.getElementById("date-table")

createDateTable(dates)

function createDateTable(dates) {
  table.innerHTML = "";
  for (var i = 0; i < dates.length; i++) {
    dateRow = `<tr id="row-${i}">
                            <td><input type=checkbox></td>
                            <td contenteditable='true'>${dates[i].reason}</td>
                            <td><input type='text' class='datapickerme' value='${dates[i].date}'></td>
                        </tr>`
    table.innerHTML += dateRow
  }

  $('.datapickerme').datepicker({
    dateFormat: "dd.mm.yy",
    showOtherMonths: true,
    selectOtherMonths: true
  });

}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
    <table id="date-table">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>


</body>

</html>

And i use class instead of find the last td.

We are here to answer your question about jqueryUI datepicker in wrong cell - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji