Develop Reference

JavaScript code i have applied on a calendar plugin is working till November , but not on december

This is the code.
.controller('CalendarCtrl',function($scope,$state,ProjectServices,$filter){
var _date = $filter('date')(new Date(), 'yyyy-MM-dd');
$scope.data = { embeddedDate: _date };
$scope.userData=$state.params.username;
$scope.employeeName = $state.params.employeeName;
$scope.mgrApprvemployeeId = $state.params.employeeID;
$scope.projectName = $state.params.projectName;
if(localStorage.getItem('employeeInfo')){
var employeeDetails = JSON.parse(localStorage.getItem('employeeInfo'));
if ($scope.mgrApprvemployeeId) {
$scope.calprofile= true;
employeeId = $scope.mgrApprvemployeeId;
$scope.mgrRsrcDetails = true;
}
else {
$scope.calprofile= false;
employeeId = employeeDetails.employeeId;
$scope.mgrRsrcDetails = false;
};
};
//localStorage.setItem('userselecteddate',JSON.stringify(data));
$scope.onTimeSet=function(newDate,oldDate){
var date= new Date(newDate),
day = (date.getDate() < 10 ? '0' : '') + date.getDate();
//day=date.getDate(),
//month=date.getMonth()+1,
month = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
year=date.getFullYear();
// week = date.getWeeks();
if(date.getDay() == 6 || date.getDay() == 0)
//if (true)
{
alert('You are submitting for a weekend!');
};
selectedDateUser=year+"-"+month+"-"+day;
$scope.data = { embeddedDate: selectedDateUser};
if (!$scope.mgrApprvemployeeId) {
$state.go('app.dayview',{calendarDate:selectedDateUser,username:$scope.userData});
} else {
$state.go('app.manager-dayview',{calendarDate:selectedDateUser,userEmployeeId:$scope.mgrApprvemployeeId,userEmployeeName:$scope.employeeName,userProjectName:$scope.projectName});
};
}
$scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {
var todaysDate = new Date();
var currentMonth = todaysDate.getMonth()+1;
var currentYear = todaysDate.getFullYear();
var currentDay = todaysDate.getDate();
var rightDate = $rightDate.utcDateValue;
var rightFormDate = new Date(rightDate);
var selectedMonth = rightFormDate.getMonth();
var selectedYear = rightFormDate.getFullYear();
if (currentMonth == selectedMonth && currentYear == selectedYear) {
$rightDate.selectable = false;
};
angular.element(document).ready(function () {
ProjectServices.getEmployeeEffortHrs(employeeId).then(function(data) {
angular.forEach(data, function(data) {
//console.log(data.effort_date);
var effort_date = new Date(data.effort_date);
var date = effort_date.getDate();
var monthService = effort_date.getMonth()+1;
var approvedStatus = data.approveStatus;
// datesArray.push(date);
//console.log(date);
var totalEffortHours = data.total_effort;
jQuery('div.datetimepicker table.day-view tbody tr td').each(function(index){
// console.log(index);
//console.log('1234');
var str = $(this).text();
if((str.substr(0,str.indexOf(' ')) == date) && selectedMonth == monthService){
//$(this).removeClass("pending-hrs").addClass("filled-hrs");
// $(this).removeClass('pending-hrs');
// $(this).addClass('filled-hrs');
if(totalEffortHours <= 8){
$(this).removeClass('pending-hrs');
$(this).addClass('filled-hrs');
if (!$scope.mgrApprvemployeeId) {
$dates[index].selectable = false;
};
}else {
$(this).removeClass('pending-hrs');
$(this).addClass('holiday-leave');
if (!$scope.mgrApprvemployeeId) {
$dates[index].selectable = false;
};
};
// e.stopPropagation();
// $(this).html(date + <br/> + totalEffortHours);
if(approvedStatus == "Reject"){
var stringDisplay = date+"<span class='rejected-timesheet'>"+"Rejected"+" </span> ";
//$(this).removeClass('disabled');
$dates[index].selectable = true;
} else{
var stringDisplay = date+"<span>"+totalEffortHours +" hrs</span>";
//$(this).addClass('disabled');
$(this).selectable = true;
};
var escaped = $(this).text(stringDisplay).text();
$(this).html(escaped.replace(/\n/g, '<br />'));
//$(this).html($(this).html().replace(/\n/g,'<br/>'));
}
});
/*if (calendarDateDay == date) {
alert(111);
$dates[j].display = $dates[j].display + " <br/>" + totalEffortHours;
}; */
});
});
for (var j=0; j < 37; j++) {
var calendarUtcDates = $dates[j].utcDateValue;
var calendarDates = new Date(calendarUtcDates);
var calendarDateDay = calendarDates.getDate();
var calendarDateMonth = calendarDates.getMonth()+1;
var calendarDateYear = calendarDates.getFullYear();
if (calendarDateMonth == selectedMonth)
{
jQuery('div.datetimepicker table.day-view tbody tr td').each(function(){
if(($(this).text() == $dates[j].display) && calendarDateMonth == selectedMonth){
$(this).addClass('pending-hrs');
}
if (currentMonth == calendarDateMonth && currentYear == calendarDateYear && currentDay <= calendarDateDay ) {
$dates[j].future = true;
}
});
if (currentMonth == calendarDateMonth && currentYear == calendarDateYear && currentDay > calendarDateDay ) {
$dates[j].display = $dates[j].display + "<span> Pending</span>";
}else if(currentMonth > calendarDateMonth && currentYear == calendarDateYear){
$dates[j].display = $dates[j].display + "<span> Pending</span>";
};
};
if (currentMonth == calendarDateMonth && currentYear == calendarDateYear && currentDay == calendarDateDay )
{
//console.log('today date');
$dates[j].display = $dates[j].display + "<span>Today</span>";
};
}
});
}
}).filter("sanitize", ['$sce', function($sce) {
return function(htmlCode) {
return $sce.trustAsHtml(htmlCode);
}
}])
The above code gives the output as if the user fill the effort it has show in green. it is achieved by adding a class. If the user's effort is rejected by the manager, it is should display in another color. It is achieved by adding a span. if the user's effort is pending it should be displayed in another color. It is also done by adding a class. But these are working only till november. only for december it is not working. can anybody help me please.

How to use AJAX or JSON in this code?

I am creating a website application that allows users to select a seat, if it is not already reserved, and reserve it.
I have created a very round about way of getting the seats that are previously reserved using iFrames, however that was temporarily, now I need to make it secure and "proper javascript code" using proper practices. I have no clue what AJAX (or JSON) is, nor how to add it to this code, but it needs to get the file "seatsReserved"+this.id(that is the date)+"Que.html" and compare the string of previously reserved seats to see which class to make the element. If this is horrible, or if any of the other things could work better, I am open to criticism to everything. Thank you all!
Here is the javascript code:
A little side note, all of the if statements are due to different amount of seats in each row
<script>
var i = " 0 ";
var counter = 0;
var leng=0;
document.getElementById("Show1").addEventListener("click", changeDay);
document.getElementById("Show2").addEventListener("click", changeDay);
document.getElementById("Show3").addEventListener("click", changeDay);
function changeDay() {
var iFrame = document.getElementById("seatList");
iFrame.src = "seatsReserved" + this.id + "Que.html";
document.getElementById('date').innerHTML = this.id;
var seatsTaken = iFrame.contentWindow.document.body.innerHTML;
var k = 0;
let = 'a';
var lc = 0;
for (lc = 1; lc <= 14; lc++) {
if (lc == 1) {
leng = 28;
}
else if (lc == 2) {
leng = 29;
}
else if (lc == 3) {
leng = 32;
}
else if (lc == 4 || lc == 6 || lc == 12 || lc == 14) {
leng = 33;
}
else if (lc == 5 || lc == 13) {
leng = 34;
}
else if (lc == 8 || lc == 10) {
leng = 35;
}
else {
leng = 36;
}
for (k = 1; k <= leng; k++) {
if (seatsTaken.indexOf((" " +
let +k + " ")) <= -1) {
seat = document.getElementById(let +k);
seat.removeEventListener("click", selectedSeat);
}
else {
document.getElementById(let +k).className = "openseat";
document.getElementById(let +k).removeEventListener("click", doNothing);
}
}
let = String.fromCharCode(let.charCodeAt(0) + 1);
}
}
function loadChanges() {
var iFrame = document.getElementById("seatList");
var seatsTaken = iFrame.contentWindow.document.body.innerHTML;
var k = 0;
let = 'a';
var lc = 0;
var leng = 0;
for (lc = 1; lc <= 14; lc++) {
if (lc == 1) {
leng = 28;
}
else if (lc == 2) {
leng = 29;
}
else if (lc == 3) {
leng = 32;
}
else if (lc == 4 || lc == 6 || lc == 12 || lc == 14) {
leng = 33;
}
else if (lc == 5 || lc == 13) {
leng = 34;
}
else if (lc == 8 || lc == 10) {
leng = 35;
}
else {
leng = 36;
}
for (k = 1; k <= leng; k++) {
if (seatsTaken.indexOf((" " +
let +k + " ")) <= -1) {
seat = document.getElementById(let +k);
seat.addEventListener("click", selectedSeat);
seat.className = "openseat";
}
else {
document.getElementById(let +k).className = "notAvailible";
document.getElementById(let +k).addEventListener("click", doNothing);
}
}
let = String.fromCharCode(let.charCodeAt(0) + 1);
}
i = " 0 ";
counter = 0;
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
document.getElementById("seatnums").innerHTML = counter;
}
i = document.getElementById("seatString").innerHTML;
counter = document.getElementById("seatnums").innerHTML;
function selectedSeat() {
var w = this.id;
var l = (" " + w);
var b = (" " + w + " ");
if (counter < 5) {
if (i.indexOf(b) <= 0) {
this.className = "closedseat";
i = i + b;
i = i.replace(" 0 ", " ");
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
counter = counter + 1;
document.getElementById("seatnums").innerHTML = counter;
}
else if (i.indexOf(b) > 0) {
this.className = "openseat";
i = i.replace(b, "");
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
counter = counter - 1;
document.getElementById("seatnums").innerHTML = counter;
}
}
else if (i.indexOf(b) > 0) {
this.className = "openseat";
i = i.replace(b, "");
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
counter = counter - 1;
document.getElementById("seatnums").innerHTML = counter;
}
}
function doNothing() {
}
var rannum = Math.random() * 1000;
document.getElementById('getConfirmation').value = rannum;
</script>

onClick of javascript not working in Browser like chrome,firefox

Sir,
I have Javascript calendar(for Picking a date) downloaded from Internet. i am able to pick a appropriate Date when working in IE 6 version. But it is unable to pick a date(on click not working) when I am using Modern Browser like Google chrome. here is code Snippet. Advice Kindly!
calendar.js file
monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];
function getRealYear(dateObj)
{
return (dateObj.getYear() % 100) +
(((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}
function getDaysPerMonth(month, year)
{
/*
Check for leap year. These are some conditions to check
year is leap year or not...
1.Years evenly divisible by four are normally leap years, except for...
2.Years also evenly divisible by 100 are not leap years, except for...
3.Years also evenly divisible by 400 are leap years.
*/
if ((year % 4) == 0)
{
if ((year % 100) == 0 && (year % 400) != 0)
return monthMaxDays[month];
return monthMaxDaysLeap[month];
}
else
return monthMaxDays[month];
}
function createCalender(year, month, day)
{
// current Date
var curDate = new Date();
var curDay = curDate.getDate();
var curMonth = curDate.getMonth();
var curYear = getRealYear(curDate)
// if a date already exists, we calculate some values here
if (!year)
{
var year = curYear;
var month = curMonth;
}
var yearFound = 0;
for (var i=0; i<document.getElementById('selectYear').options.length; i++)
{
if (document.getElementById('selectYear').options[i].value == year)
{
document.getElementById('selectYear').selectedIndex = i;
yearFound = true;
break;
}
}
if (!yearFound)
{
document.getElementById('selectYear').selectedIndex = 0;
year = document.getElementById('selectYear').options[0].value;
}
document.getElementById('selectMonth').selectedIndex = month;
// first day of the month.
var fristDayOfMonthObj = new Date(year, month, 1);
var firstDayOfMonth = fristDayOfMonthObj.getDay();
continu = true;
firstRow = true;
var x = 0;
var d = 0;
var trs = []
var ti = 0;
while (d <= getDaysPerMonth(month, year))
{
if (firstRow)
{
trs[ti] = document.createElement("TR");
if (firstDayOfMonth > 0)
{
while (x < firstDayOfMonth)
{
trs[ti].appendChild
(document.createElement ("TD"));
x++;
}
}
firstRow = false;
var d = 1;
}
if (x % 7 == 0)
{
ti++;
trs[ti] = document.createElement("TR");
}
if ( day && d == day)
{
var setID = 'calenderChoosenDay';
var styleClass = 'choosenDay';
var setTitle = 'this day is currently selected';
}
else if (d == curDay && month == curMonth && year == curYear)
{
var setID = 'calenderToDay';
var styleClass = 'toDay';
var setTitle = 'this day today';
}
else
{
var setID = false;
var styleClass = 'normalDay';
var setTitle = false;
}
var td = document.createElement("TD");
td.className = styleClass;
if (setID)
{
td.id = setID;
}
if (setTitle)
{
td.title = setTitle;
}
td.onmouseover = new Function('highLiteDay(this)');
td.onmouseout = new Function('deHighLiteDay(this)');
*if (targetEl)
td.onclick = new Functio*
('pickDate ('+year+', '+month+', '+d+')');
else
td.style.cursor = 'default';
td.appendChild(document.createTextNode(d));
trs[ti].appendChild(td);
x++;
d++;
}
return trs;
}
function showCalender(elPos, tgtEl)
{
targetEl = false;
if (document.getElementById(tgtEl))
{
targetEl = document.getElementById(tgtEl);
}
else
{
if (document.forms[0].elements[tgtEl])
{
targetEl = document.forms[0].elements[tgtEl];
}
}
var calTable = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(elPos, positions);
calTable.style.left = positions[0]+'px';
calTable.style.top = positions[1]+'px';
calTable.style.display='block';
var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
var m = matchDate.exec(targetEl.value);
if (m == null)
{
trs = createCalender(false, false, false);
showCalenderBody(trs);
}
else
{
if (m[1].substr(0, 1) == 0)
m[1] = m[1].substr(1, 1);
if (m[2].substr(0, 1) == 0)
m[2] = m[2].substr(1, 1);
m[2] = m[2] - 1;
trs = createCalender(m[3], m[2], m[1]);
showCalenderBody(trs);
}
hideSelect(document.body, 1);
}
function showCalenderBody(trs)
{
var calTBody = document.getElementById('calender');
while (calTBody.childNodes[0])
{
calTBody.removeChild(calTBody.childNodes[0]);
}
for (var i in trs)
{
calTBody.appendChild(trs[i]);
}
}
function setYears(sy, ey)
{
// current Date
var curDate = new Date();
var curYear = getRealYear(curDate);
if (sy)
startYear = curYear;
if (ey)
endYear = curYear;
document.getElementById('selectYear').options.length = 0;
var j = 0;
for (y=ey; y>=sy; y--)
{
document.getElementById('selectYear')[j++] = new Option(y, y);
}
}
function hideSelect(el, superTotal)
{
if (superTotal >= 100)
{
return;
}
var totalChilds = el.childNodes.length;
for (var c=0; c<totalChilds; c++)
{
var thisTag = el.childNodes[c];
if (thisTag.tagName == 'SELECT')
{
if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
{
var calenderEl = document.getElementById ('calenderTable');
var positions = [0,0];
var positions = getParentOffset(thisTag, positions); // nieuw
var thisLeft = positions[0];
var thisRight = positions[0] + thisTag.offsetWidth;
var thisTop = positions[1];
var thisBottom = positions[1] + thisTag.offsetHeight;
var calLeft = calenderEl.offsetLeft;
var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth;
var calTop = calenderEl.offsetTop;
var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight;
if (
(
/* check if it overlaps horizontally */
(thisLeft >= calLeft && thisLeft <= calRight)
||
(thisRight <= calRight && thisRight >= calLeft)
||
(thisLeft <= calLeft && thisRight >= calRight)
)
&&
(
/* check if it overlaps vertically */
(thisTop >= calTop && thisTop <= calBottom)
||
(thisBottom <= calBottom && thisBottom >= calTop)
||
(thisTop <= calTop && thisBottom >= calBottom)
)
)
{
hideSelectTags[hideSelectTags.length] = thisTag;
thisTag.style.display = 'none';
}
}
}
else if(thisTag.childNodes.length > 0)
{
hideSelect(thisTag, (superTotal+1));
}
}
}
function closeCalender()
{
for (var i=0; i<hideSelectTags.length; i++)
{
hideSelectTags[i].style.display = 'block';
}
hideSelectTags.length = 0;
document.getElementById('calenderTable').style.display='none';
}
function highLiteDay(el)
{
el.className = 'hlDay';
}
function deHighLiteDay(el)
{
if (el.id == 'calenderToDay')
el.className = 'toDay';
else if (el.id == 'calenderChoosenDay')
el.className = 'choosenDay';
else
el.className = 'normalDay';
}
function pickDate(year, month, day)
{
month++;
day = day < 10 ? '0'+day : day;
month = month < 10 ? '0'+month : month;
if (!targetEl)
{
alert('target for date is not set yet');
}
else
{
targetEl.value= year+'-'+month+'-'+day;
closeCalender();
}
}
function getParentOffset(el, positions)
{
positions[0] += el.offsetLeft;
positions[1] += el.offsetTop;
if (el.offsetParent)
positions = getParentOffset(el.offsetParent, positions);
return positions;
}

Wow, new Function()? Really?
td.onmouseover = function() {highLiteDay(this);};
td.onmouseout = function() {deHighLiteDay(this);};
// the above two should probably just be `:hover` styles in CSS
(function(year,month,d) {
td.onclick = function() {pickDate(year, month, d);};
})(year,month,d);
// this creates a closure to "anchor" the values of the variables
// even as the loop iterates

Why doesn't my external JavaScript file work when I load my html page?

I separated my html and JavaScript code. I placed my JavaScript code into a separate file and use 'script' tags to reference it in my html file. I have two functions within my JavaScript code one is used to create an autofill which means if I start typing text within a text box the function gives me a possible name that I may be wanting to write underneath the text box and the other creates a clock that gives the current time. Here are my JavaScript and html files respectively. Can you tell me what the problem is?
function Complete(obj, evt) {
var names = new Array("albert","alessandro","chris");
names.sort();
if ((!obj) || (!evt) || (names.length == 0)) {
return;
}
if (obj.value.length == 0) {
return;
}
var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode;
if ((elm < 32) || (elm >= 33 && elm <= 46) || (elm >= 112 && elm <= 123)) {
return;
}
var txt = obj.value.replace(/;/gi, ",");
elm = txt.split(",");
txt = elm.pop();
txt = txt.replace(/^\s*/, "");
if (txt.length == 0) {
return;
}
if (obj.createTextRange) {
var rng = document.selection.createRange();
if (rng.parentElement() == obj) {
elm = rng.text;
var ini = obj.value.lastIndexOf(elm);
}
} else if (obj.setSelectionRange) {
var ini = obj.selectionStart;
}
for (var i = 0; i < names.length; i++) {
elm = names[i].toString();
if (elm.toLowerCase().indexOf(txt.toLowerCase()) == 0) {
obj.value += elm.substring(txt.length, elm.length);
break;
}
}
if (obj.createTextRange) {
rng = obj.createTextRange();
rng.moveStart("character", ini);
rng.moveEnd("character", obj.value.length);
rng.select();
} else if (obj.setSelectionRange) {
obj.setSelectionRange(ini, obj.value.length);
}
}
function tick() {
var hours, minutes, seconds, ap;
var intHours, intMinutes, intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
switch(intHours){
case 0:
intHours = 12;
hours = intHours+":";
ap = "A.M.";
break;
case 12:
hours = intHours+":";
ap = "P.M.";
break;
case 24:
intHours = 12;
hours = intHours + ":";
ap = "A.M.";
break;
default:
if (intHours > 12) {
intHours = intHours - 12;
hours = intHours + ":";
ap = "P.M.";
break;
}
if(intHours < 12) {
hours = intHours + ":";
ap = "A.M.";
}
}
if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}
if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}
timeString = hours+minutes+seconds+ap;
Clock.innerHTML = timeString;
window.setTimeout("tick();", 100);
}
window.onload = tick;
<HTML>
<HEAD>
<H1 STYLE="text-align:center;" STYLE="font-family:verdana;">FDM Markets</H1>
<H2 STYLE="text-align:center;">Trading Platofrm</H2></br>
<STYLE type="text/css">
#p1 span {
width: 65px;
display: block;
float: left;
}
</STYLE>
<BODY>
<SCRIPT type="text/javascript" src="jscodeloginpage.js"></SCRIPT>
<p1>Login</p1></br>
</br>
<FORM name="anyForm">
Username: <input type="text" name="anyName" size="15" onKeyUp="Complete(this, event)"></br>
Password: <input type="text" size="15" name="password_box">
</FORM>
<div id=Clock style=font-size: 12"> </div>
</BODY>
</HTML>

Okay, I put your code into a jsbin. Most issues were found with help of it's code debugger / error console.
You had a few variables that were out of scope, meaning:
if(x){
var a = 1;
}
if(y){
doSomethingWith(a);
/*
* JavaScript can't access `a` here, since it was declared in the scope of the
* previous `if`. That instance of `a` only exists within that first `if`.
*/
}
You had a misplaced break in your switch/case's default section, and some other minor issues.
See the jsbin I linked to for a working example. I also made some modifications to your HTML. This line:
<div id=Clock style=font-size: 12"> </div>
Was missing a few "'s:
<div id="Clock" style="font-size: 12"> </div>
Also, </br> isn't a valid tag, you were probably looking for <br />
Here's your edited JS:
function Complete(obj, evt) {
var names = new Array("albert","alessandro","chris");
names.sort();
var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode;
if (!obj ||
!evt ||
names.length === 0 ||
obj.value.length === 0 ||
elm < 32 ||
(elm >= 33 && elm <= 46) ||
(elm >= 112 && elm <= 123)) {
return;
}
var txt = obj.value.replace(/;/gi, ",");
elm = txt.split(",");
txt = elm.pop();
txt = txt.replace(/^\s*/, "");
if (txt.length === 0) {
return;
}
var ini, rng;
if (obj.createTextRange) {
rng = document.selection.createRange();
if (rng.parentElement() == obj) {
elm = rng.text;
ini = obj.value.lastIndexOf(elm);
}
} else if (obj.setSelectionRange) {
ini = obj.selectionStart;
}
for (var i = 0; i < names.length; i++) {
elm = names[i].toString();
if (elm.toLowerCase().indexOf(txt.toLowerCase()) === 0) {
obj.value += elm.substring(txt.length, elm.length);
break;
}
}
if (obj.createTextRange) {
rng = obj.createTextRange();
rng.moveStart("character", ini);
rng.moveEnd("character", obj.value.length);
rng.select();
} else if (obj.setSelectionRange) {
obj.setSelectionRange(ini, obj.value.length);
}
}
function tick() {
var hours, minutes, seconds, ap;
var intHours, intMinutes, intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
switch(intHours){
case 0:
intHours = 12;
hours = intHours+":";
ap = "A.M.";
break;
case 12:
hours = intHours+":";
ap = "P.M.";
break;
case 24:
intHours = 12;
hours = intHours + ":";
ap = "A.M.";
break;
default:
if (intHours > 12) {
intHours = intHours - 12;
hours = intHours + ":";
ap = "P.M.";
}
if(intHours < 12) {
hours = intHours + ":";
ap = "A.M.";
}
break;
}
if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}
if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}
timeString = hours+minutes+seconds+ap;
Clock.innerHTML = timeString;
window.setTimeout(tick, 100);
}
window.onload = tick;

Issue with datepicker

I am using a sample program that contains three text fields, upon clicking on them it will displays a date picker and once you choose a date that date will be displayed in the filed. It is working fine for first field but next two fields are not working i.e, those are displaying the date picker but not setting the picked value to the filed. Here is my sample code.
<script language="javaScript" type="text/javascript" src="calendar.js"></script>
<link href="style/calendar.css" rel="stylesheet" type="text/css">
........
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));"
id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));"
id="selectYear">
</select>
</td>
<td align="center">
<a href="#" onClick="closeCalender();">
<font color="#003333" size="+1">X</font>
</a>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
<td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
calender.js
// Array of max days in month in a year and in a leap year
monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];
function getRealYear(dateObj)
{
return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}
function getDaysPerMonth(month, year)
{
/*
Check for leap year. These are some conditions to check year is leap year or not...
1.Years evenly divisible by four are normally leap years, except for...
2.Years also evenly divisible by 100 are not leap years, except for...
3.Years also evenly divisible by 400 are leap years.
*/
if ((year % 4) == 0)
{
if ((year % 100) == 0 && (year % 400) != 0)
return monthMaxDays[month];
return monthMaxDaysLeap[month];
}
else
return monthMaxDays[month];
}
function createCalender(year, month, day)
{
// current Date
var curDate = new Date();
var curDay = curDate.getDate();
var curMonth = curDate.getMonth();
var curYear = getRealYear(curDate)
// if a date already exists, we calculate some values here
if (!year)
{
var year = curYear;
var month = curMonth;
}
var yearFound = 0;
for (var i=0; i<document.getElementById('selectYear').options.length; i++)
{
if (document.getElementById('selectYear').options[i].value == year)
{
document.getElementById('selectYear').selectedIndex = i;
yearFound = true;
break;
}
}
if (!yearFound)
{
document.getElementById('selectYear').selectedIndex = 0;
year = document.getElementById('selectYear').options[0].value;
}
document.getElementById('selectMonth').selectedIndex = month;
// first day of the month.
var fristDayOfMonthObj = new Date(year, month, 1);
var firstDayOfMonth = fristDayOfMonthObj.getDay();
continu = true;
firstRow = true;
var x = 0;
var d = 0;
var trs = []
var ti = 0;
while (d <= getDaysPerMonth(month, year))
{
if (firstRow)
{
trs[ti] = document.createElement("TR");
if (firstDayOfMonth > 0)
{
while (x < firstDayOfMonth)
{
trs[ti].appendChild(document.createElement("TD"));
x++;
}
}
firstRow = false;
var d = 1;
}
if (x % 7 == 0)
{
ti++;
trs[ti] = document.createElement("TR");
}
if (day && d == day)
{
var setID = 'calenderChoosenDay';
var styleClass = 'choosenDay';
var setTitle = 'this day is currently selected';
}
else if (d == curDay && month == curMonth && year == curYear)
{
var setID = 'calenderToDay';
var styleClass = 'toDay';
var setTitle = 'this day today';
}
else
{
var setID = false;
var styleClass = 'normalDay';
var setTitle = false;
}
var td = document.createElement("TD");
td.className = styleClass;
if (setID)
{
td.id = setID;
}
if (setTitle)
{
td.title = setTitle;
}
td.onmouseover = new Function('highLiteDay(this)');
td.onmouseout = new Function('deHighLiteDay(this)');
if (targetEl)
td.onclick = new Function('pickDate('+year+', '+month+', '+d+')');
else
td.style.cursor = 'default';
td.appendChild(document.createTextNode(d));
trs[ti].appendChild(td);
x++;
d++;
}
return trs;
}
function showCalender(elPos, tgtEl)
{
targetEl = false;
if (document.getElementById(tgtEl))
{
targetEl = document.getElementById(tgtEl);
}
else
{
if (document.forms[0].elements[tgtEl])
{
targetEl = document.forms[0].elements[tgtEl];
}
}
var calTable = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(elPos, positions);
calTable.style.left = positions[0]+'px';
calTable.style.top = positions[1]+'px';
calTable.style.display='block';
var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
var m = matchDate.exec(targetEl.value);
if (m == null)
{
trs = createCalender(false, false, false);
showCalenderBody(trs);
}
else
{
if (m[1].substr(0, 1) == 0)
m[1] = m[1].substr(1, 1);
if (m[2].substr(0, 1) == 0)
m[2] = m[2].substr(1, 1);
m[2] = m[2] - 1;
trs = createCalender(m[3], m[2], m[1]);
showCalenderBody(trs);
}
hideSelect(document.body, 1);
}
function showCalenderBody(trs)
{
var calTBody = document.getElementById('calender');
while (calTBody.childNodes[0])
{
calTBody.removeChild(calTBody.childNodes[0]);
}
for (var i in trs)
{
calTBody.appendChild(trs[i]);
}
}
function setYears(sy, ey)
{
// current Date
var curDate = new Date();
var curYear = getRealYear(curDate);
if (sy)
startYear = curYear;
if (ey)
endYear = curYear;
document.getElementById('selectYear').options.length = 0;
var j = 0;
for (y=ey; y>=sy; y--)
{
document.getElementById('selectYear')[j++] = new Option(y, y);
}
}
function hideSelect(el, superTotal)
{
if (superTotal >= 100)
{
return;
}
var totalChilds = el.childNodes.length;
for (var c=0; c<totalChilds; c++)
{
var thisTag = el.childNodes[c];
if (thisTag.tagName == 'SELECT')
{
if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
{
var calenderEl = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(thisTag, positions); // nieuw
var thisLeft = positions[0];
var thisRight = positions[0] + thisTag.offsetWidth;
var thisTop = positions[1];
var thisBottom = positions[1] + thisTag.offsetHeight;
var calLeft = calenderEl.offsetLeft;
var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth;
var calTop = calenderEl.offsetTop;
var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight;
if (
(
/* check if it overlaps horizontally */
(thisLeft >= calLeft && thisLeft <= calRight)
||
(thisRight <= calRight && thisRight >= calLeft)
||
(thisLeft <= calLeft && thisRight >= calRight)
)
&&
(
/* check if it overlaps vertically */
(thisTop >= calTop && thisTop <= calBottom)
||
(thisBottom <= calBottom && thisBottom >= calTop)
||
(thisTop <= calTop && thisBottom >= calBottom)
)
)
{
hideSelectTags[hideSelectTags.length] = thisTag;
thisTag.style.display = 'none';
}
}
}
else if(thisTag.childNodes.length > 0)
{
hideSelect(thisTag, (superTotal+1));
}
}
}
function closeCalender()
{
for (var i=0; i<hideSelectTags.length; i++)
{
hideSelectTags[i].style.display = 'block';
}
hideSelectTags.length = 0;
document.getElementById('calenderTable').style.display='none';
}
function highLiteDay(el)
{
el.className = 'hlDay';
}
function deHighLiteDay(el)
{
if (el.id == 'calenderToDay')
el.className = 'toDay';
else if (el.id == 'calenderChoosenDay')
el.className = 'choosenDay';
else
el.className = 'normalDay';
}
function pickDate(year, month, day)
{
month++;
day = day < 10 ? '0'+day : day;
month = month < 10 ? '0'+month : month;
if (!targetEl)
{
alert('target for date is not set yet');
}
else
{
targetEl.value= day+'-'+month+'-'+year;
closeCalender();
}
}
function getParentOffset(el, positions)
{
positions[0] += el.offsetLeft;
positions[1] += el.offsetTop;
if (el.offsetParent)
positions = getParentOffset(el.offsetParent, positions);
return positions;
}
What is the problem with my code or the picker??