Jqueryui Datepicker不顯示日歷
[英]Jqueryui Datepicker not displaying calendar
問題描述
我目前正在使用jquery ui datepicker作為兩個輸入字段。 為了調用日歷中inputfield必須有一流的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>
3 個解決方案
解決方案1
2 已采納 2013-11-20 18:45:36
您要做的是確保在創建內容並將其添加到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字段（您不希望再次針對靜態字段運行它）。
解決方案2
1 2013-11-20 18:24:33
在頁面中包含jQuery UI。
在<head> ：
<script type=text/javascript src="your_jquery_ui.js"></script>
好吧，你包括jQuery UI的，現在檢查你的類不hasDatepicker而非datepicker ？
如您所見： http ： //jqueryui.com/datepicker/
解決方案3
1 2013-11-20 18:32:22
由於您是動態添加輸入（datepickers），最簡單的解決方案是添加以下內容：
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});
順便說一句，你真的只需要在你的頁面中打一個文檔就緒。
如何格式化jQueryUI datepicker日歷的年份？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.