Jqueryui Datepicker not displaying calendar
Question
I am currently using jquery ui datepicker for 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 datepicker to 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
In the jquery this is the line where i set the class:
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
<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 answers
solution1
2 ACCPTED 2013-11-20 18:45:36
What you want to do is make sure that the datepicker code runs after the content has been created and added to the DOM. The easiest way to do this would be to move the datepicker code inside your showFields method, right at the end. 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).
solution2
1 2013-11-20 18:24:33
Include jQuery UI to your page.
In the <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 ?
As you see here: http://jqueryui.com/datepicker/
solution3
1 2013-11-20 18:32:22
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.