Jqueryui Datepicker不显示日历

Question

I am currently using jquery ui datepicker for two input fields. 我目前正在使用jquery ui datepicker作为两个输入字段。 In order to call the calendar the inputfield must have a class of datepicker . 为了调用日历中inputfield必须有一流的datepicker 。 I am using a for loop in the javascript to generate the input fields. 我在javascript中使用for循环来生成输入字段。 I have added the class datepicker to each input field that can be possibly generated. 我已经将类datepicker添加到可能生成的每个输入字段中。 But no calendar appears. 但是没有日历出现。 In the firebug console the html does show that the input fields have class datepicker . 在firebug控制台中，html确实显示输入字段具有类datepicker 。 Now if do this with a static input field it works fine. 现在，如果使用静态输入字段，它可以正常工作。 How can I display calendar when the field is click? 如何在单击字段时显示日历？ Example 例

In the jquery this is the line where i set the class: 在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>';

Full Jquery code 完整的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 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

What you want to do is make sure that the datepicker code runs after the content has been created and added to the DOM. 您要做的是确保在创建内容并将其添加到DOM之后运行datepicker代码。 The easiest way to do this would be to move the datepicker code inside your showFields method, right at the end. 要做到这一点，最简单的方法是将移动datepicker代码的内部showFields方法，就在年底。 Like this: 像这样：

function showFields(option) { 

    . . . rest of method . . .

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

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

The $('#course_catalog').find(".datepicker") part will make sure that only the dynamically added datepicker fields will be initialized (you don't want to run it again against the static ones). $('#course_catalog').find(".datepicker")部分将确保仅初始化动态添加的datepicker字段（您不希望再次针对静态字段运行它）。

Answer 2

Include jQuery UI to your page. 在页面中包含jQuery UI。

http://jqueryui.com/download/ http://jqueryui.com/download/

In the <head> : 在<head> ：

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

Ok, you included the jQuery UI, now check your class is not hasDatepicker instead of datepicker ? 好吧，你包括jQuery UI的，现在检查你的类不hasDatepicker而非datepicker ？

As you see here: http://jqueryui.com/datepicker/ 如您所见： http ： //jqueryui.com/datepicker/

Answer 3

Since you're adding inputs (datepickers) dynamically, the easiest solution is to add this: 由于您是动态添加输入（datepickers），最简单的解决方案是添加以下内容：

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

jsFiddle example jsFiddle例子

BTW, you really only need one document ready call in your page. 顺便说一句，你真的只需要在你的页面中打一个文档就绪。

Jqueryui Datepicker不显示日历

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-11-20 18:45:36

解决方案2
1 2013-11-20 18:24:33

解决方案3
1 2013-11-20 18:32:22

Jqueryui Datepicker不显示日历

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-11-20 18:45:36

解决方案2 1 2013-11-20 18:24:33

解决方案3 1 2013-11-20 18:32:22

解决方案1
2 已采纳 2013-11-20 18:45:36

解决方案2
1 2013-11-20 18:24:33

解决方案3
1 2013-11-20 18:32:22