Referencing local copies of JS and CSS files
I am building a form dynamically using PHP and the jQuery DatePicker widget. The form will have a variable number of date fields in it depending upon the number of records retrieved from a MySQL table. I can get this to work fine... until I start trying to change minDate and maxDate options for each DatePicker instance based upon values retrieved from the MySQL table.
I decided to simplify the code to remove references to the MySQL table data until I can figure out how to get the loop to work for changing the minDate and maxDate options. (I can easily put back in the table references later.) My simplified test code builds functional date fields, but I can't seem to get the minDate and maxDate options to change or even apply. If I use the function to pass the options at the time the DatePicker is initialized, it works. But when I attempt to modify the value after initialization, it does not work. I am assuming I have interpreted the API reference example incorrectly, or am placing the script in the wrong place (body vs. head).
My test code looks like this:
- <!DOCTYPE html">
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="//swgtcweb.swgtc.net/students/proctoring/jquery-ui.css">
<script src="//swgtcweb.swgtc.net/students/proctoring/jquery-1.10.2.js"></script>
<script src="//swgtcweb.swgtc.net/students/proctoring/jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script>
$(function() {
$( ".datepicker" ).datepicker({ minDate: "12/08/2014", maxDate: "12/08/2014" });
});
</script>
</head>
<body>
<? for($i=1; $i<4; $i++){ ?>
<script>
$( "#reqdatepicker<? echo $i; ?>" ).datepicker( "option", "minDate", "12/0<? echo $i; ?>/2014");
$( "#reqdatepicker<? echo $i; ?>" ).datepicker( "option", "maxDate", "12/0<? echo $i; ?>/2014");
</script>
<p>Date: <input type="text" class="datepicker" id="reqdatepicker<? echo $i; ?>"></p>
<? } ?>
</body>
</html>