Question

我目前正在使用jquery ui datepicker作为两个输入字段。为了调用日历，inputfield必须具有datepicker类。我在javascript中使用for循环来生成输入字段。我已将类datepicker添加到可能生成的每个输入字段中。但是没有日历出现。在firebug控制台中，html确实显示输入字段具有类datepicker。现在，如果使用静态输入字段，它可以正常工作。如何在单击字段时显示日历？ Example

在jquery中，这是我设置类的行：

content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';

完整的Jquery代码

<script>
    $(document).ready(function () {
        $('select').change(function() {
            var option = $(this).val();
            showFields(option);
            return false;
        });

        function showFields(option) { 
            var content = '';
            for (var i = 1; i <= option; i++) {
                content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'"><option value="">--- Select ---</option>"'
                    <?php
                        $course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list ");
                        $course_query->execute();
                        $data = $course_query->fetchAll();
                        foreach ($data as $row) {
                            //dropdown values pulled from database
                            echo 'content += \'<option value="' . $row['course_id'] . ':'.$row['course_name'].'">' . $row['course_name'] . '</option>\';';
                        }
                    ?>
                '"';                   

                content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';

            }

            $('#course_catalog').html(content);
        }
    });

    $(function() {
        $( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }).val();
    });
</script>

HTML

<form action="courses.php" method="POST">
    <b>Select the course</b>
    Academy<input id="academy_id" name="acad_id" placeholder="Academy ID" type="text" />
    Courses being offered?
    <select name="courses_offered">
        <option value="default">---Select---</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <div id="course_catalog"></div>
    Static input: <input type="text" id="last_contacted_date" name="last_contacted_date" class="datepicker" />
    <input value="SAVE" name="submit" type="submit">
</form>

Answer 1

您要做的是确保在创建内容并将其添加到DOM后运行datepicker代码。最简单的方法是在datepicker方法中移动showFields代码。像这样：

function showFields(option) { 

    . . . rest of method . . .

    $('#course_catalog').html(content);

    $('#course_catalog').find(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
}

$('#course_catalog').find(".datepicker")部分将确保仅初始化动态添加的datepicker字段（您不希望再次针对静态字段运行它）。

Answer 2

在页面中加入jQuery UI。

http://jqueryui.com/download/

在<head>：

中

<script type=text/javascript src="your_jquery_ui.js"></script>

好的，你加入了jQuery用户界面，现在检查你的课程不是hasDatepicker而不是datepicker？

如您所见：http://jqueryui.com/datepicker/

Answer 3

由于您是动态添加输入（datepickers），最简单的解决方案是添加：

$('body').on('focus',".datepicker", function(){
    $(this).datepicker();
});

<强> jsFiddle example

顺便说一句，你真的只需要在你的页面中打一个文件就绪。

Jqueryui Datepicker不显示日历

3 个答案: