Home/ Questions/Q 9009059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T02:05:52+00:00

I’m having some strange behaviour when using the datepicker. When I load the page,

  • 0

I’m having some strange behaviour when using the datepicker. When I load the page, and directly click on the datepicker input, nothing happens. When I click again, nothing happens. But when I click on another input field and then try again the datepicker field, it’ll show up.

The issue showed up, after I put the datepicker trigger into a live function, because I have input which will be dynamically generated.

This is my code:

$(".date").on('click', function() {
    $(this).datepicker({
        dateFormat: "dd.mm.yy",
        altField: $(this).closest("td").find(".dateFormated"),
        altFormat: "yy-mm-dd"
    })
})

Edit: I have seen that live() is deprecated as of 1.7. I therefore switched live() for on(). Didn’t solve the issue though.

Whole Html

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="gencyolcu" />

    <title>Untitled 1</title>
    <link rel="stylesheet" href="http://localhost:8082/ivy/page/designer/ZWM$1/css/cupertino/jquery-ui-1.9.2.custom.css" />
    <script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/js/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            counter = 0;

            $("#addRow").click(function() {
                counter++;

                rowHtml = '\
                <tr class="datarow" id="row' + counter + '">\
                    <td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>\
                    <td><input type="text" class="from" /></td>\
                    <td><input type="text" class="to" /></td>\
                    <td>\
                        <select class="type">\
                            <option value="1">Typ 1</option>\
                            <option value="2">Typ 2</option>\
                        </select>\
                    </td>\
                    <td class="removeRow" id=' + counter + '>X</td>\
                </tr>';

                $('#submitButton').before(rowHtml);
            })

            $(".removeRow").live("click", function() {
                id = $(this).attr("id");
                $("#row" + id).remove();
            })

            $("[name=formZeitdaten]").submit(function(i) {
                values = "";
                $(".datarow").each(function(j) {
                    tr = $(this);
                    date = tr.find('td').find('.date').val();
                    from = tr.find('td').find('.from').val();
                    to = tr.find('td').find('.to').val();
                    type = tr.find('td').find('.type').val();
                    values = values + date + ',' + from + ',' + to + ',' + type + ';';
                })
                console.log(values);
                $("[name=dataset]").val(values);
            })

            $("#slider").slider({
                range: true,
                min: 0,
                max: 1440,
                step: 15,
                values: [30, 210],
                slide: function(event, ui) {
                    $(".date").val(ui.values[0] + ":" + ui.values[1]);
                }
            });

            $(".date").on('click', function() {
                $(this).datepicker({
                    dateFormat: "dd.mm.yy",
                    altField: $(this).closest("td").find(".dateFormated"),
                    altFormat: "yy-mm-dd"
                })
            })
        });
    </script>
</head>

<body>
<span id="test"></span>
<form name="formZeitdaten" method="post">
    <table id="zeitdaten">
        <tr>
            <td>Datum</td>
            <td>Von</td>
            <td>Bis</td>
            <td>Typ</td>
            <td id="addRow"><input type="button" value="Hinzufügen" /></td>
        </tr>

        <tr class="datarow">
            <td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>
            <td><input type="text" class="from" /></td>
            <td><input type="text" class="to" /></td>
            <td>
                <select class="type">
                    <option value="1">Typ 1</option>
                    <option value="2">Typ 2</option>
                </select>
            </td>
            <td></td>
        </tr>

        <tr id="submitButton">
            <td><input type="submit" /></td>
        </tr>
    </table>
</form>
<div id="slider"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your addRow function, add:

    $("#row"+counter+" .date").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    showButtonPanel: true,
    showAnim: 'show'
});

    after you add the element to the DOM. You can then get rid of the $(".date").on('click',...) statement later.

    • 0