Hi All,
Here I used Multiple JQuery date picker in a page with Start and End date validation and also generate a dynamic table for the given date limit. Also available in export Word file option.
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
/* Style added for table layout*/
<STYLE type="text/css">.tabDesign {
margin:0px;padding:0px;
width:70%;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.tabDesign table{
width:70%;
margin:0px;padding:0px;
}.tabDesign tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.tabDesign table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.tabDesign table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.tabDesign tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.tabDesign tr:hover td{
}
.tabDesign tr:nth-child(odd){ background-color:#e5e5e5; }
.tabDesign tr:nth-child(even) { background-color:#ffffff; }.tabDesign td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:12px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.tabDesign tr:last-child td{
border-width:0px 1px 0px 0px;
}.tabDesign tr td:last-child{
border-width:0px 0px 1px 0px;
}.tabDesign tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.tabDesign tr:first-child td{
background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color:#cccccc;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#000000;
}
.tabDesign tr:first-child:hover td{
background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color:#cccccc;
}
.tabDesign tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.tabDesign tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
/* Start and end date validation for jquery date picker*/
<script type="text/javascript">
$(document).ready(function() {
$('#table').hide();
$('#submit').click(function() {
if ($('#start_date').val() == "") {
alert("Please Select Start Date");
$('#table').hide();
}
else if ($('#end_date').val() == "") {
alert("Please Select End Date");
$('#table').hide();
}
});
$(document).ready(function() {
$("#start_date").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
numberOfMonths: 1,
onSelect: function(selected) {
$("#end_date").datepicker("option", "minDate", selected)
var dateString = $("#start_date").val();
var date = new Date(dateString);
}
});
$("#end_date").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
numberOfMonths: 1,
onSelect: function(selected) {
$("#start_date").datepicker("option", "maxDate", selected)
var dateString = $("#end_date").val();
var date = new Date(dateString);
}
});
});
});
</script>
<script type="text/javascript">
function clearPage() {
$('#clear').click(function() {
$('#table').hide();
$('#start_date').val() === "";
$('#start_date').val() === "";
});
}
function datelimit() {
var st_date = document.getElementById('start_date').value;
var ed_date = document.getElementById('end_date').value;
showUser(st_date, ed_date);
}
/* Ajax for dynamic table creation based on date limits*/
function showUser(Stdate, enddate)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "AttendanceSheet_1.php?st=" + Stdate + '&ed=' + enddate + '&submit=yes', true);
xmlhttp.send();
}
</script>
/* Form started */
<?php
$sub = $_REQUEST['submit'];
if (strcmp($sub, "yes") != 0) { ?>
<div id="main_table">
<b>Attendance Sheet</b>
</div>
<div id="date">
<b>Start Date</b>
<input name="start_date" id="start_date" readonly="readonly" >
<b>End Date</b>
<input name="end_date" id="end_date" readonly="readonly">
</div>
<div id="finish">
<input type="submit" id="submit" name="submit" value="Submit" onclick="datelimit()">
<input type="submit" id="clear" name="clear" value="Clear" onclick="clearPage()" >
</div>
<?php } ?>
/* Dynamic table generation code */
<div id="txtHint">
<b>
<?php
$st_date = $_REQUEST['st'];
$st_date1 = changeToDateFormat($st_date);
$ed_date = $_REQUEST['ed'];
$ed_date1 = changeToDateFormat($ed_date);
function changeToDateFormat($cdate) {
list($mon, $dat, $year) = explode("/", $cdate);
return $year . "-" . $mon . "-" . $dat;
}
?>
</b>
</div>
<div id="table" class="tabDesign">
<?php
$hostname = "localhost";
$dbname = "sears";
$dbusername = "root";
$dbpassword = "";
$con = mysql_connect($hostname, $dbusername, $dbpassword);
mysql_select_db($dbname, $con);
$qry = "select ilt.ilt_id, ilt.courseid,course.title as title, course.start_date, course.end_date, course.cversion as version,
From_unixtime(iltsess.session_stime) as start_time,From_unixtime(iltsess.session_etime) as end_time,iltsess.instructor_id instructor_name
from lw_ilt ilt,lw_courses course,lw_ilt_session iltsess
where course.courseid=ilt.courseid and course.status='ACTIVE' and ilt.status='ACTIVE' and ilt.ilt_id=iltsess.ilt_id
and course.start_date between '$st_date1' and '$ed_date1' order by course.start_date";
$result = mysql_query($qry);
if (!$result) {
echo 'Could not run query: ' . mysql_error();
exit;
}
echo "</br>";
$count = mysql_num_rows($result);
echo "<table id='table' width='70%' align='centre' border='2px' colspan='2' style='border-collapse :collapse'>
<tr border='1px'>
<th>Coursename</th>
<th>Start Date</th>
<th>Status</th>
<th>Action</th>
</tr>";
if($count==0)
echo "<tr><td colspan='4' style='text-align:center;'>No courses are available in these dates</td></tr></table>";
else{
while ($row = mysql_fetch_array($result)) {
$version = $row[5];
if ($version == '-5.00')
$versionval = 'Closed';
else if ($version == '0.00')
$versionval = 'Open';
echo "<tr>
<td>" . $row[2] . "</td>
<td>" . $row[3] . "</td>
<td>" . $versionval . "</td>";
$query = "select * from lw_ilt_attendance ilt_att, lw_users user ,lw_ilt ilt
where user.userid=ilt_att.user_id and ilt_att.ilt_id=ilt.ilt_id and ilt.ilt_id=" . $row[0];
$res = mysql_query($query);
if (!$res) {
echo 'Could not run query: ' . mysql_error();
exit;
}
$doc = mysql_num_rows($res);
if ($doc == 0)
echo "<td style='background-color:#DDD9C3;color:black;'>No One Registered this course</td></tr>";
else
echo "<td><a href='report.php?id=$row[0]'>Export as Document</a></td>
</tr>";
}
echo "</table>";
}
mysql_close($con);
?>
</div>
output:
~~~~~~~
 |
| Showing records between dates |
 | ||||
| NO Record found this days |
No comments:
Post a Comment