Jqueryui Datepicker不显示日历

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

在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>

来源

2013-11-20 Code_Ed_Student

你忘了包含jQuery UI吗？ – j08691

@ j08691是的，它被添加 –

并初始化日期选择器。它不会自动出现！ – adeneo

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

function showFields(option) { 

    . . . rest of method . . . 

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

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

的$('#course_catalog').find(".datepicker")一部分将确保只有动态添加datepicker字段将被初始化（你不想再对静态的运行）。

来源

2013-11-20 18:45:36 talemyn

这种方法非常完美！ –

很酷。。。很高兴它解决了。 :) – talemyn

包括jQuery用户界面到您的网页。

http://jqueryui.com/download/

在<head>：

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

好吧，你包括jQuery UI的，现在检查你的类不是hasDatepicker，而不是datepicker？

正如你在这里看到：http://jqueryui.com/datepicker/

来源

2013-11-20 18:24:33

'hasDatepicker'类只显示一次选择日期。 –

既然你要添加的输入（datepickers）动态，最简单的解决办法是补充一点：BTW

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

jsFiddle example

，你真的只需要在页面中准备好一个文档。

来源

2013-11-20 18:32:22 j08691

很光滑！只是好奇，当一个'.datepicker'被多次聚焦时，这会产生什么问题吗？有没有办法来检查这个日期选择器是否已经被创建？它甚至重要吗？ – zgood

我不认为你会遇到任何问题，尽管你可以在关闭日期后摧毁日期选择器。 – j08691

Jqueryui Datepicker不显示日历

回答

相关问题