It works fine in another site I have, but in this one, I can't get the calendar to popup properly. It comes up, but fills the entire width of the screen and is formatted so I can't really see most of it.
Look at this page to see what I mean (click on one of the date fields to activate it):
http://upc.at.utah.gov/member-cle.php
On my other page, it works fine (see picture). The code is almost the same except I designed the form using RSD elements instead of just coding them by hand.
Here's the code on the page that works (I can't give you the url because it is behind a protected area).
<div class="row subpage-row">
<main class="coffee-span-12 coffee-880-span-12 main-content-column single-panel-background">
<h1 class="section-head">UPC Conference CLE Reports</h1>
<section class="container main-container training-pad">
<a href="/member-cle.php?sitelokaction=logout" class="materials-button topright">Logout</a>
<hr class="style-four" />
<p>Select the From and To dates for the CLE report. They MUST be in this format: 2015-01-01 (YYYY-MM-DD). If you
want to see ALL dates, then leave the From and To dates blank.</p><br />
<div class="profile-block">
<form name="dateForm" method="post" action="member-cle-show.php">
<p>From Date: <input type="text" id="fromDatePick" name="from_date" value="" /></p>
<p>To Date: <input type="text" id="toDatePick" name="to_date" value="" /></p>
<button type="submit" name="submit" value="submit" class="button_style">Show CLE</button>
</form>
</div>
<div>
</div>
<hr class="style-four" />
<p>You should log out when you are done browsing member only areas:</p>
<a href="/member-cle.php?sitelokaction=logout" class="materials-button">Logout</a><br />
<br />
</section>
</main>
</div>
<div class="row">
<footer class="coffee-span-12 footer-column">
<div class="subgrid footer-grid">
<div class="row">
<div class="coffee-span-4 coffee-880-span-12 centerItems">
<span class="text-element footer-text">Copyright © 2014–2016 Utah Prosecution Council</span>
</div>
<div class="coffee-span-4 coffee-1023-span-5 coffee-880-span-12 centerItems">
<span class="text-element footer-text">PO BOX 140841 • SALT LAKE CITY UT 84114-0841</span>
</div>
<div class="coffee-span-4 coffee-1023-span-3 coffee-880-span-12 centerItems">
<span class="text-element footer-text footer-links"><a href="index.php">Home</a> | <a href="training.php">Training</a> | <a href="sitemap.html">Site Map</a></span>
</div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script>
$(function() {
$('#fromDatePick').datepick({dateFormat: 'yyyy-mm-dd', defaultDate: '-1y'});
$('#toDatePick').datepick({dateFormat: 'yyyy-mm-dd'});
});
</script>
</body>
<main class="coffee-span-12 coffee-880-span-12 main-content-column single-panel-background">
<h1 class="section-head">UPC Conference CLE Reports</h1>
<section class="container main-container training-pad">
<a href="/member-cle.php?sitelokaction=logout" class="materials-button topright">Logout</a>
<hr class="style-four" />
<p>Select the From and To dates for the CLE report. They MUST be in this format: 2015-01-01 (YYYY-MM-DD). If you
want to see ALL dates, then leave the From and To dates blank.</p><br />
<div class="profile-block">
<form name="dateForm" method="post" action="member-cle-show.php">
<p>From Date: <input type="text" id="fromDatePick" name="from_date" value="" /></p>
<p>To Date: <input type="text" id="toDatePick" name="to_date" value="" /></p>
<button type="submit" name="submit" value="submit" class="button_style">Show CLE</button>
</form>
</div>
<div>
</div>
<hr class="style-four" />
<p>You should log out when you are done browsing member only areas:</p>
<a href="/member-cle.php?sitelokaction=logout" class="materials-button">Logout</a><br />
<br />
</section>
</main>
</div>
<div class="row">
<footer class="coffee-span-12 footer-column">
<div class="subgrid footer-grid">
<div class="row">
<div class="coffee-span-4 coffee-880-span-12 centerItems">
<span class="text-element footer-text">Copyright © 2014–2016 Utah Prosecution Council</span>
</div>
<div class="coffee-span-4 coffee-1023-span-5 coffee-880-span-12 centerItems">
<span class="text-element footer-text">PO BOX 140841 • SALT LAKE CITY UT 84114-0841</span>
</div>
<div class="coffee-span-4 coffee-1023-span-3 coffee-880-span-12 centerItems">
<span class="text-element footer-text footer-links"><a href="index.php">Home</a> | <a href="training.php">Training</a> | <a href="sitemap.html">Site Map</a></span>
</div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script>
$(function() {
$('#fromDatePick').datepick({dateFormat: 'yyyy-mm-dd', defaultDate: '-1y'});
$('#toDatePick').datepick({dateFormat: 'yyyy-mm-dd'});
});
</script>
</body>
What's different that makes it not work?
Thanks,
Ron
