Question

使用datepicker时我有一些奇怪的行为。当我加载页面，并直接单击日期选择器输入时，没有任何反应。当我再次点击时，没有任何反应。但是当我点击另一个输入字段然后再次尝试使用datepicker字段时，它将显示出来。

在我将datepicker触发器放入实时函数后出现问题，因为我有动态生成的输入。

这是我的代码：

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

编辑：我已经看到live()从1.7开始被弃用。因此，我为live()切换了on()。但是没有解决问题。

整个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>

Answer 1

在你的addRow函数中，添加：

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

将元素添加到DOM后

。然后，您可以稍后删除$(".date").on('click',...)语句。

Answer 2

这应该对你有用

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

如果我第一次点击另一个输入字段，jQuery Datepicker只会触发

2 个答案: