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.

Uncaught SyntexError: Unexpected end of input JS

I'm getting on chrome Uncaught SyntexError: Unexpected end of input in the first line of code I went through my code but I cannot find it please help me.
I searched through treads here but noting.
What do I need to do in order to fix it?
<%--JS--%>
<script type="text/javascript">
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
$(document).ready(function () {
try {
if (is_chrome) {
//alert("is chrome!!");
$("span#spanAddPerson").css("top", "0px");
}
} catch (err) {
alert(err);
}
});
</script>
<script type="text/javascript">
function setClientTime(sender, eventArgs) {
try {
var datePicker = $find("<%= actOverViewDateTime.ClientID %>");
var date = datePicker.get_selectedDate();
if (date == null) {
var nowDate = new Date();
datePicker.set_selectedDate(nowDate);
}
} catch (err) {
alert(err);
}
}
function StatusCheck(sender, args) {
var status = $find("<%= rcbStatus.ClientID %>");
var datePickerEndingTime = $find("<%= rdtpEndingTime.ClientID %>");
var item = status.get_text();
if (item == "Closed") {
document.getElementById('EndingTime').style.visibility = 'visible'
datePickerEndingTime.set_visible(true);
var nowDate = new Date();
datePickerEndingTime.set_selectedDate(nowDate)
datePickerEndingTime.set_maxDate(nowDate);
} else {
document.getElementById('EndingTime').style.visibility = 'hidden'
datePickerEndingTime.set_visible(false);
}
}
//IE7 bug
// Only Numeric keys and "."-(46) are allowed
function isNumberKey(e, allowDecimalPoint) {
var key = e.charCode || e.keyCode || 0;
var keychar = String.fromCharCode(key);
if (!allowDecimalPoint && key == 46) e.preventDefault();
if (((key == 8 || key == 9 || key == 46 || key == 35 || key == 36 || (key >= 37 && key <= 40)) && e.charCode == 0) /* backspace, end, begin, top, bottom, right, left, del, tab */
|| (key >= 46 && key <= 57)) { /* 0-9 */
return;
} else {
e.preventDefault();
}
}
function abc(sender) {
var radTextBox1 = $find("actOverViewCode");
radTextBox1.get_styles().EnabledStyle[0] = "background-color: LightYellow;";
radTextBox1.updateCssClass();
}
function NumbersOnly(sender, args) {
var keycode = args.get_keyCode()
if (keycode == 8) {
//Checking if the key pressed is BackSpace key, then do not cancel the event.
return;
}
if (keycode != 46 && keycode != 45 && keycode > 31 && (keycode < 48 || keycode > 57)) {
args.set_cancel(true);
}
}
function getDateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if (month.toString().length == 1) {
var month = '0' + month;
}
if (day.toString().length == 1) {
var day = '0' + day;
}
if (hour.toString().length == 1) {
var hour = '0' + hour;
}
if (minute.toString().length == 1) {
var minute = '0' + minute;
}
if (second.toString().length == 1) {
var second = '0' + second;
}
var dateTime = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
return dateTime;
}
function checkLevelZone(sender, args) {
var txtOffSite = $find("<%=txtOffSite.ClientID %>");
var checkbox = $find("<%=cbIsOffSite.ClientID %>");
var level = $find("<%=ActOverviewLevel.ClientID %>");
var zone = $find("<%=ActOverViewZone.ClientID %>");
if (checkbox.get_checked()) {
level.clearSelection();
zone.clearSelection();
level.trackChanges();
zone.trackChanges();
level.disable();
zone.disable();
txtOffSite.enable();
} else {
level.enable();
//zone.enable();
txtOffSite.disable();
}
}
function CheckPersonLocation(sender, args) {
var l_location = $find("<%=rcbPeopleLocation.ClientID %>");
var count = l_location.get_checkedItems().length;
if (count <= 1) {
radconfirm('Would you like to add more location to that person?</br>', confirmDisableCallBackFn, 370, 200, null, 'Case Global Alert');
} else {
__doPostBack("<%=btnAddPerson.UniqueID %>", "");
}
}
function confirmDisableCallBackFn(arg) {
if (arg == true) {
check.set_checked(false);
__doPostBack("<%=btnAddPerson.UniqueID %>", "");
}
else {
check.set_checked(true);
}
}
function togglePopupModality() {
var wnd = $find("<%=modalPopup.ClientID %>");
wnd.set_modal(!wnd.get_modal());
if (!wnd.get_modal()) document.documentElement.focus();
}
function showDialogInitially() {
var wnd = $find("<%=modalPopup.ClientID %>");
wnd.show();
Sys.Application.remove_load(showDialogInitially);
}
function disableSubmitButton(sender, eventArgs) {
$find("<%=btnAddActivity.ClientID %>").set_enabled(false);
__doPostBack("<%=btnAddActivity.UniqueID %>", "");
}
function confirmPersonDuplicateCallBackFn(arg) {
if (arg == true) {
$get("<%=hfCheckDuplicate.ClientID %>").value = "0";
__doPostBack("<%=btnAddPerson.UniqueID %>", "");
}
}
function DisableSaving(sender, args) {
var isValid = Page_ClientValidate('validationOverviewTab');
if (isValid) {
var rcbStatus = $find("<%=rcbStatus.ClientID %>");
if (rcbStatus.get_text() == "Open") {
sender.set_autoPostBack(true);
} else {
var OverViewDateTime = $find("<%=actOverViewDateTime.ClientID %>");
var getOverViewDateTime = OverViewDateTime.get_selectedDate();
var date = new Date(getOverViewDateTime), mnth = ("0" + (date.getMonth() + 1)).slice(-2), day = ("0" + date.getDate()).slice(-2);
var resultOverViewDate = [mnth, day, date.getFullYear()].join("-");
var getOverViewHours = getOverViewDateTime.getHours();
var getOverViewMin = getOverViewDateTime.getMinutes();
var EndingDateTime = $find("<%=rdtpEndingTime.ClientID %>");
var getEndingDateTime = EndingDateTime.get_selectedDate();
var EndDate = new Date(getEndingDateTime), mnth = ("0" + (getEndingDateTime.getMonth() + 1)).slice(-2), day = ("0" + getEndingDateTime.getDate()).slice(-2);
var resultEndingDate = [mnth, day, date.getFullYear()].join("-");
var getEndingHours = getEndingDateTime.getHours();
var getEndingMin = getEndingDateTime.getMinutes();
//Check for Valid Dates
if (resultOverViewDate > resultEndingDate) {
radalert("Date/Time is greater than Ending Time Please correct date and time<h3 style='color: #ff0000;'></h3>", 380, 170, "Alert");
} else if (resultOverViewDate < resultEndingDate) {
sender.set_autoPostBack(true);
}
if (resultOverViewDate == resultEndingDate) {
//Check if it's the case of equal hours
if (getOverViewHours == getEndingHours) {
if (getOverViewMin > getEndingMin) {
radalert("Date/Time-minutes must be less then Ending Time-minutes<h3 style='color: #ff0000;'></h3>", 380, 170, "Alert");
} else if (getOverViewHours == getEndingHours && getOverViewMin == getEndingMin) {
sender.set_autoPostBack(true);
}
else {
sender.set_autoPostBack(true);
}
} else {
sender.set_autoPostBack(true);
}
}
}
}
}
function SaveStatus(sender, args) {
var status = $find("<%= rcbStatus.ClientID %>");
var datePickerEndingTime = $find("<%= rdtpEndingTime.ClientID %>");
var item = status.get_text();
if (item == "Closed") {
document.getElementById('EndingTime').style.visibility = 'visible'
datePickerEndingTime.set_visible(true);
} else {
document.getElementById('EndingTime').style.visibility = 'hidden'
datePickerEndingTime.set_visible(false);
}
}

Try to declare is_chrome in try block and end your script tag,
<script type="text/javascript">
$(document).ready(function () {
try {
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome) {
//alert("is chrome!!");
$("span#spanAddPerson").css({'top': "0px"});//top syntax is like this.
}
} catch (err) {
alert(err);
}
});
</script>
<script type="text/javascript">
function setClientTime(sender, eventArgs) {
try {
var datePicker = $find("<%= actOverViewDateTime.ClientID %>");
var date = datePicker.get_selectedDate();
if (date == null) {
var nowDate = new Date();
datePicker.set_selectedDate(nowDate);
}
} catch (err) {
alert(err);
}
}
function StatusCheck(sender, args) {
var status = $find("<%= rcbStatus.ClientID %>");
var datePickerEndingTime = $find("<%= rdtpEndingTime.ClientID %>");
var item = status.get_text();
if (item == "Closed") {
document.getElementById('EndingTime').style.visibility = 'visible'
datePickerEndingTime.set_visible(true);
var nowDate = new Date();
datePickerEndingTime.set_selectedDate(nowDate)
datePickerEndingTime.set_maxDate(nowDate);
} else {
document.getElementById('EndingTime').style.visibility = 'hidden'
datePickerEndingTime.set_visible(false);
}
}
//IE7 bug
// Only Numeric keys and "."-(46) are allowed
function isNumberKey(e, allowDecimalPoint) {
var key = e.charCode || e.keyCode || 0;
var keychar = String.fromCharCode(key);
if (!allowDecimalPoint && key == 46) e.preventDefault();
if (((key == 8 || key == 9 || key == 46 || key == 35 || key == 36 || (key >= 37 && key <= 40)) && e.charCode == 0) /* backspace, end, begin, top, bottom, right, left, del, tab */
|| (key >= 46 && key <= 57)) { /* 0-9 */
return;
} else {
e.preventDefault();
}
}
function abc(sender) {
var radTextBox1 = $find("actOverViewCode");
radTextBox1.get_styles().EnabledStyle[0] = "background-color: LightYellow;";
radTextBox1.updateCssClass();
}
function NumbersOnly(sender, args) {
var keycode = args.get_keyCode()
if (keycode == 8) {
//Checking if the key pressed is BackSpace key, then do not cancel the event.
return;
}
if (keycode != 46 && keycode != 45 && keycode > 31 && (keycode < 48 || keycode > 57)) {
args.set_cancel(true);
}
}
function getDateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if (month.toString().length == 1) {
var month = '0' + month;
}
if (day.toString().length == 1) {
var day = '0' + day;
}
if (hour.toString().length == 1) {
var hour = '0' + hour;
}
if (minute.toString().length == 1) {
var minute = '0' + minute;
}
if (second.toString().length == 1) {
var second = '0' + second;
}
var dateTime = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
return dateTime;
}
function checkLevelZone(sender, args) {
var txtOffSite = $find("<%=txtOffSite.ClientID %>");
var checkbox = $find("<%=cbIsOffSite.ClientID %>");
var level = $find("<%=ActOverviewLevel.ClientID %>");
var zone = $find("<%=ActOverViewZone.ClientID %>");
if (checkbox.get_checked()) {
level.clearSelection();
zone.clearSelection();
level.trackChanges();
zone.trackChanges();
level.disable();
zone.disable();
txtOffSite.enable();
} else {
level.enable();
//zone.enable();
txtOffSite.disable();
}
}
function CheckPersonLocation(sender, args) {
var l_location = $find("<%=rcbPeopleLocation.ClientID %>");
var count = l_location.get_checkedItems().length;
if (count <= 1) {
radconfirm('Would you like to add more location to that person?</br>', confirmDisableCallBackFn, 370, 200, null, 'Case Global Alert');
} else {
__doPostBack("<%=btnAddPerson.UniqueID %>", "");
}
}
function confirmDisableCallBackFn(arg) {
if (arg == true) {
check.set_checked(false);
__doPostBack("<%=btnAddPerson.UniqueID %>", "");
}
else {
check.set_checked(true);
}
}
function togglePopupModality() {
var wnd = $find("<%=modalPopup.ClientID %>");
wnd.set_modal(!wnd.get_modal());
if (!wnd.get_modal()) document.documentElement.focus();
}
function showDialogInitially() {
var wnd = $find("<%=modalPopup.ClientID %>");
wnd.show();
Sys.Application.remove_load(showDialogInitially);
}
function disableSubmitButton(sender, eventArgs) {
$find("<%=btnAddActivity.ClientID %>").set_enabled(false);
__doPostBack("<%=btnAddActivity.UniqueID %>", "");
}
function confirmPersonDuplicateCallBackFn(arg) {
if (arg == true) {
$get("<%=hfCheckDuplicate.ClientID %>").value = "0";
__doPostBack("<%=btnAddPerson.UniqueID %>", "");
}
}
function DisableSaving(sender, args) {
var isValid = Page_ClientValidate('validationOverviewTab');
if (isValid) {
var rcbStatus = $find("<%=rcbStatus.ClientID %>");
if (rcbStatus.get_text() == "Open") {
sender.set_autoPostBack(true);
} else {
var OverViewDateTime = $find("<%=actOverViewDateTime.ClientID %>");
var getOverViewDateTime = OverViewDateTime.get_selectedDate();
var date = new Date(getOverViewDateTime), mnth = ("0" + (date.getMonth() + 1)).slice(-2), day = ("0" + date.getDate()).slice(-2);
var resultOverViewDate = [mnth, day, date.getFullYear()].join("-");
var getOverViewHours = getOverViewDateTime.getHours();
var getOverViewMin = getOverViewDateTime.getMinutes();
var EndingDateTime = $find("<%=rdtpEndingTime.ClientID %>");
var getEndingDateTime = EndingDateTime.get_selectedDate();
var EndDate = new Date(getEndingDateTime), mnth = ("0" + (getEndingDateTime.getMonth() + 1)).slice(-2), day = ("0" + getEndingDateTime.getDate()).slice(-2);
var resultEndingDate = [mnth, day, date.getFullYear()].join("-");
var getEndingHours = getEndingDateTime.getHours();
var getEndingMin = getEndingDateTime.getMinutes();
//Check for Valid Dates
if (resultOverViewDate > resultEndingDate) {
radalert("Date/Time is greater than Ending Time Please correct date and time<h3 style='color: #ff0000;'></h3>", 380, 170, "Alert");
} else if (resultOverViewDate < resultEndingDate) {
sender.set_autoPostBack(true);
}
if (resultOverViewDate == resultEndingDate) {
//Check if it's the case of equal hours
if (getOverViewHours == getEndingHours) {
if (getOverViewMin > getEndingMin) {
radalert("Date/Time-minutes must be less then Ending Time-minutes<h3 style='color: #ff0000;'></h3>", 380, 170, "Alert");
} else if (getOverViewHours == getEndingHours && getOverViewMin == getEndingMin) {
sender.set_autoPostBack(true);
}
else {
sender.set_autoPostBack(true);
}
} else {
sender.set_autoPostBack(true);
}
}
}
}
}
function SaveStatus(sender, args) {
var status = $find("<%= rcbStatus.ClientID %>");
var datePickerEndingTime = $find("<%= rdtpEndingTime.ClientID %>");
var item = status.get_text();
if (item == "Closed") {
document.getElementById('EndingTime').style.visibility = 'visible'
datePickerEndingTime.set_visible(true);
} else {
document.getElementById('EndingTime').style.visibility = 'hidden'
datePickerEndingTime.set_visible(false);
}
}
</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

how select date from CalendarControl.js in reverse order

I have CalendarControl.js, which on selecting date gives me date in format 14-Aug-2012.But I want To select date from that as 2012-08-14 so as use in MySQL query as it display records for date on inserting in 2012-08-14 format./*here I change it as
var months = ['01','02','03','04','05','06','07','08','09','10','11','12'];
then I am getting month as number but want to reverse it.
function positionInfo(object) {
var p_elm = object;
this.getElementLeft = getElementLeft;
function getElementLeft() {
var x = 0;
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
while (elm != null) {
x+= elm.offsetLeft;
elm = elm.offsetParent;
}
return parseInt(x);
}
this.getElementWidth = getElementWidth;
function getElementWidth(){
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetWidth);
}
this.getElementRight = getElementRight;
function getElementRight(){
return getElementLeft(p_elm) + getElementWidth(p_elm);
}
this.getElementTop = getElementTop;
function getElementTop() {
var y = 0;
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
while (elm != null) {
y+= elm.offsetTop;
elm = elm.offsetParent;
}
return parseInt(y);
}
this.getElementHeight = getElementHeight;
function getElementHeight(){
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetHeight);
}
this.getElementBottom = getElementBottom;
function getElementBottom(){
return getElementTop(p_elm) + getElementHeight(p_elm);
}
}
function CalendarControl() {
var calendarId = 'CalendarControl';
var currentYear = 0;
var currentMonth = 0;
var currentDay = 0;
var selectedYear = 0;
var selectedMonth = 0;
var selectedDay = 0;
var months =
['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
var dateField = null;
function getProperty(p_property){
var p_elm = calendarId;
var elm = null;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if (elm != null){
if(elm.style){
elm = elm.style;
if(elm[p_property]){
return elm[p_property];
} else {
return null;
}
} else {
return null;
}
}
}
function setElementProperty(p_property, p_value, p_elmId){
var p_elm = p_elmId;
var elm = null;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if((elm != null) && (elm.style != null)){
elm = elm.style;
elm[ p_property ] = p_value;
}
}
function setProperty(p_property, p_value) {
setElementProperty(p_property, p_value, calendarId);
}
function getDaysInMonth(year, month) {
return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
}
function getDayOfWeek(year, month, day) {
var date = new Date(year,month-1,day)
return date.getDay();
}
this.clearDate = clearDate;
function clearDate() {
dateField.value = '';
hide();
}
this.setDate = setDate;
function setDate(year, month, day) {
if (dateField) {
if (day < 10) {day = "0" + day;}
month=parseInt(month);
var dateString = day+"-"+ months[month-1]+"-"+year;
dateField.value = dateString;
hide();
}
return;
}
this.changeMonth = changeMonth;
function changeMonth(change) {
currentMonth += change;
currentDay = 0;
if(currentMonth > 12) {
currentMonth = 1;
currentYear++;
} else if(currentMonth < 1) {
currentMonth = 12;
currentYear--;
}
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}
this.changeYear = changeYear;
function changeYear(change) {
currentYear += change;
currentDay = 0;
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}
function getCurrentYear() {
var year = new Date().getYear();
if(year < 1900) year += 1900;
return year;
}
function getCurrentMonth() {
return new Date().getMonth() + 1;
}
function getCurrentDay() {
return new Date().getDate();
}
function calendarDrawTable() {
var dayOfMonth = 1;
var validDay = 0;
var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
var daysInMonth = getDaysInMonth(currentYear, currentMonth);
var css_class = null; //CSS class for each day
var table = "<table cellspacing='0' cellpadding='0' border='0'>";
table = table + "<tr class='header'>";
table = table + " <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'><</a> <a href='javascript:changeCalendarControlYear(-1);'>«</a></td>";
table = table + " <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
table = table + " <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>»</a> <a href='javascript:changeCalendarControlMonth(1);'>></a></td>";
table = table + "</tr>";
table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";
for(var week=0; week < 6; week++) {
table = table + "<tr>";
for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
if(week == 0 && startDayOfWeek == dayOfWeek) {
validDay = 1;
} else if (validDay == 1 && dayOfMonth > daysInMonth) {
validDay = 0;
}
if(validDay) {
if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
css_class = 'current';
} else if (dayOfWeek == 0 || dayOfWeek == 6) {
css_class = 'weekend';
} else {
css_class = 'weekday';
}
table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
dayOfMonth++;
} else {
table = table + "<td class='empty'> </td>";
}
}
table = table + "</tr>";
}
table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
table = table + "</table>";
return table;
}
this.show = show;
function show(field) {
can_hide = 0;
// If the calendar is visible and associated with
// this field do not do anything.
if (dateField == field) {
return;
} else {
dateField = field;
}
if(dateField) {
try {
var dateString = new String(dateField.value);
var dateParts = dateString.split("-");
selectedMonth = parseInt(dateParts[0],10);
selectedDay = parseInt(dateParts[1],10);
selectedYear = parseInt(dateParts[2],10);
} catch(e) {}
}
if (!(selectedYear && selectedMonth && selectedDay)) {
selectedMonth = getCurrentMonth();
selectedDay = getCurrentDay();
selectedYear = getCurrentYear();
}
currentMonth = selectedMonth;
currentDay = selectedDay;
currentYear = selectedYear;
if(document.getElementById){
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
setProperty('display', 'block');
var fieldPos = new positionInfo(dateField);
var calendarPos = new positionInfo(calendarId);
var x = fieldPos.getElementLeft();
var y = fieldPos.getElementBottom();
setProperty('left', x + "px");
setProperty('top', y + "px");
if (document.all) {
setElementProperty('display', 'block', 'CalendarControlIFrame');
setElementProperty('left', x + "px", 'CalendarControlIFrame');
setElementProperty('top', y + "px", 'CalendarControlIFrame');
setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
}
}
}
this.hide = hide;
function hide() {
if(dateField) {
setProperty('display', 'none');
setElementProperty('display', 'none', 'CalendarControlIFrame');
dateField = null;
}
}
this.visible = visible;
function visible() {
return dateField
}
this.can_hide = can_hide;
var can_hide = 0;
}
var calendarControl = new CalendarControl();
function showCalendarControl(textField) {
// textField.onblur = hideCalendarControl;
calendarControl.show(textField);
}
function clearCalendarControl() {
calendarControl.clearDate();
}
function hideCalendarControl() {
if (calendarControl.visible()) {
calendarControl.hide();
}
}
function setCalendarControlDate(year, month, day) {
calendarControl.setDate(year, month, day);
}
function changeCalendarControlYear(change) {
calendarControl.changeYear(change);
}
function changeCalendarControlMonth(change) {
calendarControl.changeMonth(change);
}
document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='CalendarControl'></div>");

Try change the array do a new order to revert it
selectedMonth = parseInt(dateParts[1],10);
selectedDay = parseInt(dateParts[2],10);
selectedYear = parseInt(dateParts[0],10);

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??