Jqueryui日期选择器不显示日历
Jqueryui Datepicker not displaying calendar
我目前正在为两个输入字段使用jquery ui datepicker
。为了调用日历,input字段必须具有datepicker
类。我在javascript中使用for循环来生成输入字段。我已经将类datepicker
添加到可能生成的每个输入字段中。但没有显示日历。在firebug控制台中,html确实显示输入字段具有类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>
您要做的是确保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
字段将被初始化(您不想对静态字段再次运行它)。
在页面中包含jQuery UI。
http://jqueryui.com/download/
在<head>
:中
<script type=text/javascript src="your_jquery_ui.js"></script>
好的,你包含了jQuery UI,现在检查你的类不是hasDatepicker
而不是datepicker
?
如您所见:http://jqueryui.com/datepicker/
由于您是动态添加输入(日期选择器),因此最简单的解决方案是添加以下内容:
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
jsFiddle示例
顺便说一句,你真的只需要在你的页面上打一个文档准备电话。
相关文章:
- 如何在完整日历中的当天点击时显示活动详细信息
- 日历显示不正确
- php:两个日历没有显示
- Jqueryui日期选择器不显示日历
- AngularJS uib日期选择器没有'在uib选项卡中,不要在第一次打开/关闭事件之后显示日历
- Struts:突出显示日历中的日期范围(JQuery/Javascript)
- 使用周号跳转到/显示日历中的特定周
- 我希望在按下日期文本字段时显示日历,并且用户应该能够从该日历中选择日期
- 显示日历中的有限天数
- 使用JavaScript函数显示日历
- 使用javascript语言在html文件中显示日历上的小时和分钟
- 从数据库中按日期显示日历上的事件
- Html5输入元素"日期"-如何显示日历元素
- 我如何得到完整的日历显示日历在初始渲染
- 无法显示日历
- 在可移动的弹出窗口中显示日历
- 如何在html中点击文本框显示日历
- 如何在jQuery mobile中显示日历插件而不重新加载
- uib日期选择器弹出窗口不显示日历
- jQuery中的DatePicker不显示日历