javascript Jqueryui Datepicker 不显示日历
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20103782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jqueryui Datepicker not displaying calendar
提问by Code_Ed_Student
I am currently using jquery ui datepickerfor two input fields. In order to call the calendar the inputfield must have a class of datepicker. I am using a for loop in the javascript to generate the input fields. I have added the class datepickerto each input field that can be possibly generated. But no calendar appears. In the firebug console the html does show that the input fields have class datepicker. Now if do this with a static input field it works fine. How can I display calendar when the field is click? Example
我目前正在将 jquery uidatepicker用于两个输入字段。为了调用日历，输入字段必须有一个datepicker. 我在 javascript 中使用 for 循环来生成输入字段。我已将该类添加datepicker到可能生成的每个输入字段中。但是没有日历出现。在萤火虫控制台中，html 确实显示输入字段具有 class datepicker。现在，如果使用静态输入字段执行此操作，它可以正常工作。单击该字段时如何显示日历？例子
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>
采纳答案by talemyn
What you want to do is make sure that the datepickercode runs after the content has been created and added to the DOM. The easiest way to do this would be to move the datepickercode inside your showFieldsmethod, right at the end. Like this:
您要做的是确保datepicker代码在创建内容并将其添加到 DOM 后运行。最简单的方法是将datepicker代码移到你的showFields方法中，就在最后。像这样：
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 datepickerfields will be initialized (you don't want to run it again against the static ones).
该$('#course_catalog').find(".datepicker")部分将确保仅datepicker初始化动态添加的字段（您不想针对静态字段再次运行它）。
回答by Paulo Roberto Rosa
Include jQuery UI to your page.
将 jQuery UI 包含到您的页面中。
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 hasDatepickerinstead of datepicker?
好的，你包含了 jQuery UI，现在检查你的类是hasDatepicker不是datepicker?
As you see here: http://jqueryui.com/datepicker/
正如你在这里看到的：http: //jqueryui.com/datepicker/
回答by j08691
Since you're adding inputs (datepickers) dynamically, the easiest solution is to add this:
由于您正在动态添加输入（日期选择器），因此最简单的解决方案是添加以下内容：
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
BTW, you really only need one document ready call in your page.
顺便说一句，您实际上只需要在您的页面中调用一个文档就绪调用。
