Develop Reference

Multiple filters Simultaneous

I have a few filters (checkbox and price filter and select option).
I want these filters to work together. But there is a problem. Filters work individually. But I want these filters to work together.
I have used this method. Group filters to work. But you can use your own method.
function rangeSlider() {
$(".range-slider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 150,
from: 0,
to: 140,
type: 'double',
step: 1,
prefix: "$",
grid: true,
onFinish: function(data) {
var _price = filters.findIndex(item => item.field === 'price');
if (_price != -1) filters[_price]['value'] = [data.from, data.to];
else addOrRemoveFilter('price', [data.from, data.to], true);
customFilter();
// console.log(addOrRemoveFilter('price', [data.from, data.to], true));
}
});
}
function customFilter() {
let filtered_list = [];
FlyList.filter(item => {
filters.forEach(function(el, i) {
let _field = el['field'];
let _value = el['value'];
// console.log(_value);
if (typeof(_value) === 'object' && _value.length) {
if (parseInt(item[_field]) >= (parseInt(_value[0] * 1000)) && parseInt(item[_field]) <= (parseInt(_value[1] * 1000))) {
filtered_list.push(item);
} else {
FlyList = [];
}
} else {
let isMulti = _value.split(',');
//RANGE PRICE SLIDER
if (isMulti.length > 1) {
let time = miliseconds(item[_field].split(':')[0], item[_field].split(':')[1])
let num1 = miliseconds(isMulti[0].split(':')[0], isMulti[0].split(':')[1]);
let num2 = miliseconds(isMulti[1].split(':')[0], isMulti[1].split(':')[1]);
if (time >= num1 && time <= num2) filtered_list.push(item);
} else {
//end RANGE PRICE SLIDER
item[_field] == _value ? filtered_list.push(item) : false;
}
}
})
});
function miliseconds(hrs, min) {
return ((hrs * 60 * 60 + min * 60) * 1000);
}
$('#flights').updateDom(filtered_list.length ? filtered_list : FlyList, {
animate: true,
});
}
let filterCheckboxes = document.querySelectorAll('.filtersAll');
filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change', (e) => {
e.preventDefault();
let filterTypeElement = findFilterTypeElement(e.target);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
addOrRemoveFilter(field, val, e.target.checked);
customFilter();
}
}));
document.getElementById('optionAll').addEventListener('change', (e) => {
e.preventDefault();
let filterTypeElement = findFilterTypeElement(e.target);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
addOrRemoveFilter(field, val, true);
for (var index = 0; index < e.target.options.length; index++) {
addOrRemoveFilter(field, e.target.options[index].value, false);
}
addOrRemoveFilter(field, val, true);
customFilter();
}
})
function addOrRemoveFilter(f, v, add) {
if (add) {
filters.push({
field: f.toLowerCase(),
value: v
});
} else {
for (let i = 0; i < filters.length; i++) {
if (filters[i].field === f.toLowerCase() && filters[i].value === v) {
filters.splice(i, 1);
}
}
}
// console.log(filters);
}
function getParents(el, parentSelector /* optional */ ) {
// If no parentSelector defined will bubble up all the way to *document*
if (parentSelector === undefined) {
parentSelector = document;
}
var parents = [];
var p = el.parentNode;
while (p && (p !== parentSelector || p.parentNode)) {
var o = p;
parents.push(o);
p = o.parentNode;
}
parents.push(parentSelector); // Push that parentSelector you wanted to stop at
return parents;
}
function findFilterTypeElement(el) {
var result = null;
var parents = getParents(el);
parents.forEach((item) => {
if (hasClass(item, 'filter_type') && result == null) {
result = item;
}
});
return result;
}
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

How to determine if the date pick/choose from datepicker is a holiday?

I am developing an asp.net mvc3 project. I have this picture below dated 8/29/2016 it must be a holiday. And also I have a table in my SQL Server 2k8 for holidays so that date fall on holiday from my sql table. I want is if it fall on holiday the No. of Days must -(minus) the # of holiday depending on how many holiday/s in the duration of filing.
I have this code below for my Start Leave
$("#LSDate").change(function (event) {
var start = $("#LSDate").val();
var end = $("#LEDate").val();
var EmployeeId = $("#hidEmployeeId").val();
var LeaveTypeId = $("#LeaveType").val();
saveHalfDay = false;
saveHalfDayPM = false;
$("#LeaveIsHalfDay").attr("checked", false);
if (LeaveTypeId == 3) {
$.ajax({
type: "POST",
url: '../Attendance/_NoDaysApplied',
data: '&EmployeeId=' + EmployeeId + '&StartDate=' + start + '&LeaveTypeId=' + LeaveTypeId,
dataType: 'json',
success: function (response) {
if (response != null) {
$("#LEDate").val(response.msg);
$("#txtNoDays").val(response.noofdays);
$("#txtNoHrs").val(response.noofdays * 8);
}
else {
alert("Saving failed. Date Applied exists!");
$("#LSDate").val("MM/dd/yyyy");
$("#LEDate").val("MM/dd/yyyy");
$("#txtNoDays").val(0);
$("#txtNoHrs").val(0);
}
},
error: function (reponse) { }
});
}
else if (end != "MM/dd/yyyy" && end != "") {
$.ajax({
type: "POST",
url: '../Attendance/_NoDaysLeaveApplied',
data: '&EmployeeId=' + EmployeeId + '&StartDate=' + start + '&EndDate=' + end + '&LeaveTypeId=' + LeaveTypeId,
dataType: 'json',
success: function (response) {
if (response != null) {
//alert("sucess" + response);
var dayoff = response.dayoff;
var a = $("#LSDate").datepicker('getDate').getTime(),
b = $("#LEDate").datepicker('getDate').getTime(),
c = 24 * 60 * 60 * 1000,
diffDays = Math.round(Math.abs((a - b) / (c)));
var days = (diffDays) + 1;
var numdays = (days - dayoff);
if (a > b) {
numdays = 0;
alert("End of Leave must be greater than start of leave.");
}
var hrs = numdays * 8;
$("#txtNoDays").val(numdays);
$("#txtNoHrs").val(hrs);
if ($("#LeaveType").val() == 16) {
var url1 = '../BenefitManagement/_SELValidation';
var _data1 = '&StartDate=' + $("#LSDate").val() + '&EndDate=' + $("#LEDate").val();
SELValidation(url1, _data1)
}
}
else {
alert("Please contact the administrator."); //alert("Saving failed. Date Applied exists!");
$("#LSDate").val("MM/dd/yyyy");
$("#LEDate").val("MM/dd/yyyy");
$("#txtNoDays").val(0);
$("#txtNoHrs").val(0);
}
},
error: function (reponse) { }
});
}
});
Start Leave Controller
[HttpPost]
public ActionResult _NoDaysApplied(string EmployeeId, string StartDate, int LeaveTypeId)
{
int empId = Convert.ToInt32(EmployeeId);
DateTime Sdate = Convert.ToDateTime(StartDate);
DateTime Edate = Sdate;
var response = new JsonResult();
var LeavePolicy = (from a in db.LeavePolicies where a.LeaveTypeId == LeaveTypeId select a).SingleOrDefault();
var Employee = (from a in db.Employees where a.EmployeeId == empId select a).SingleOrDefault();
if (LeavePolicy.IsIncludeRestDay == true)
{
if (Employee.OriginalAppointment != null)
{
if (LeaveTypeId == 3 && Employee.OriginalAppointment.Value.AddDays(720) <= DateTime.Now)
{
Edate = Sdate.AddDays(59);
var strEdate = Edate.ToString("MM/dd/yyyy");
int IsExist = (from ld in db.LeaveDetails where ld.TranDate >= Sdate && ld.TranDate <= Edate && ld.TranType == "L" && ld.EmployeeId == empId && ld.IsDisApproved == false && ld.TotalHours > 0 select ld.TranDate).Count();
if (IsExist == 0)
{
response.Data = new
{
msg = strEdate,
noofdays = 60
};
}
else
{
response.Data = new
{
msg = "Leave exists."
};
}
}
else if (LeaveTypeId == 3 && Employee.OriginalAppointment.Value.AddDays(270) >= DateTime.Now)
{
TimeSpan diff = DateTime.Now - Employee.OriginalAppointment.Value;
int noofdays = diff.Days / 12;
Edate = Sdate.AddDays(noofdays - 1);
var strEdate = Edate.ToString("MM/dd/yyyy");
int IsExist = (from ld in db.LeaveDetails where ld.TranDate >= Sdate && ld.TranDate <= Edate && ld.TranType == "L" && ld.EmployeeId == empId && ld.IsDisApproved == false && ld.TotalHours > 0 select ld.TranDate).Count();
if (IsExist == 0)
{
response.Data = new
{
msg = strEdate,
noofdays = noofdays
};
}
else
{
response.Data = new
{
msg = "Leave exists."
};
}
}
}
else
{
response.Data = new
{
msg = "Original Appointment is required."
};
}
}
return response;
}
End Leave Date Picker
$("#LEDate").change(function (event) {
var end = $("#LEDate").val();
var start = $("#LSDate").val();
var EmployeeId = $("#hidEmployeeId").val();
var LeaveTypeId = $("#LeaveType").val();
$("#LeaveIsHalfDay").attr("checked", false);
saveHalfDay = false;
saveHalfDayPM = false;
if (start == "MM/dd/yyyy") {
alert("Please fill in Start Date!");
}
else {
$.ajax({
type: "POST",
url: '../Attendance/_NoDaysLeaveApplied',
data: '&EmployeeId=' + EmployeeId + '&StartDate=' + start + '&EndDate=' + end + '&LeaveTypeId=' + LeaveTypeId,
dataType: 'json',
success: function (response) {
if (response != null) {
//alert("sucess" + response);
var dayoff = response.dayoff;
var a = $("#LSDate").datepicker('getDate').getTime(),
b = $("#LEDate").datepicker('getDate').getTime(),
c = 24 * 60 * 60 * 1000,
diffDays = Math.round(Math.abs((a - b) / (c)));
var days = (diffDays) + 1;
var numdays = (days - dayoff);
if (a > b) {
numdays = 0;
alert("End of Leave must be greater than start of leave.");
}
var hrs = numdays * 8;
$("#txtNoDays").val(numdays);
$("#txtNoHrs").val(hrs);
if ($("#LeaveType").val() == 16) {
var url1 = '../BenefitManagement/_SELValidation';
var _data1 = '&StartDate=' + $("#LSDate").val() + '&EndDate=' + $("#LEDate").val();
SELValidation(url1, _data1)
}
}
else {
alert("Please contact the administrator.");
$("#LSDate").val("MM/dd/yyyy");
$("#LEDate").val("MM/dd/yyyy");
$("#txtNoDays").val(0);
$("#txtNoHrs").val(0);
}
},
error: function (reponse) { }
});
}
});
End Leave Controller
[HttpPost]
public ActionResult _NoDaysLeaveApplied(string EmployeeId, string StartDate, string EndDate, int LeaveTypeId)
{
int empId = Convert.ToInt32(EmployeeId);
DateTime Sdate = Convert.ToDateTime(StartDate);
DateTime Edate = Convert.ToDateTime(EndDate);
var res = new JsonResult();
int IsExist = (from ld in db.LeaveDetails where ld.TranDate >= Sdate && ld.TranDate <= Edate && ld.TranType == "L" && ld.EmployeeId == empId && ld.IsDisApproved == false && ld.TotalHours > 0 select ld.TranDate).Count();
var LeavePolicy = (from a in db.LeavePolicies orderby a.LeavePolicyId where a.LeaveTypeId == LeaveTypeId select a).FirstOrDefault();
if (LeavePolicy.IsIncludeRestDay == false)
{
int checkshift = (from sd in db.ShiftDetails where sd.EmployeeId == empId && sd.DateApplied >= (Sdate) && sd.DateApplied <= (Edate) select sd.EmployeeId).Count();
int dayoff = 0;
if (IsExist == 0)
{
if (checkshift > 0)
{
int isDayoff = (from sd in db.ShiftDetails where sd.EmployeeId == empId && sd.DateApplied >= (Sdate) && sd.DateApplied <= (Edate) && (sd.IsDayOff == true) select sd.EmployeeId).Count();
int isHoliday = (from sd in db.ShiftDetails where sd.EmployeeId == empId && sd.DateApplied >= (Sdate) && sd.DateApplied <= (Edate) && (sd.IsHoliday == true) select sd.EmployeeId).Count();
dayoff = (isDayoff + isHoliday);
}
else
{
TimeSpan diff = Edate - Sdate;
int days = diff.Days;
for (var i = 0; i <= days; i++)
{
var testDate = Sdate.AddDays(i);
switch (testDate.DayOfWeek)
{
case DayOfWeek.Saturday: dayoff++;
break;
case DayOfWeek.Sunday: dayoff++;
break;
}
}
}
}
else
{
return null;
}
res.Data = new
{
dayoff
};
}
else
{
res.Data = new
{
dayoff = 0
};
}
return res;
}

I solve it now guys thanks. I create a function in js and controller here is it
var txtdy, countholiday;
var nhrs;
function getHolidayCount(EmployeeId, start, end) {
var isCount = 0;
var nofhrs = 8;
var url = '../Attendance/_getHolidayCount';
var txtday = $("#txtNoDays").val();
var data = '&EmployeeId=' + EmployeeId + '&StartDate=' + start + '&EndDate=' + end;
$.ajax({
type: "POST",
url: url,
data: data,
dataType: 'json',
async: false,
success: function (response) {
isCount = response.isCount;
countholiday = isCount;
if (isCount > 0) {
txtday = txtday - isCount;
txtdy = txtday;
nhrs = nofhrs * txtday;
}
},
error: function (reponse) { }
});
return isCount;
}
and for the controller
[HttpPost]
public ActionResult _getHolidayCount(string EmpId, string StartDate, string EndDate)
{
//Boolean isTrue = false;
var isCount = "";
int empId = Convert.ToInt32(EmpId);
DateTime Sdate = Convert.ToDateTime(StartDate);
DateTime Edate = Convert.ToDateTime(EndDate);
while (Sdate <= Edate)
{
if (!(Sdate.DayOfWeek == DayOfWeek.Saturday || Sdate.DayOfWeek == DayOfWeek.Sunday))
{
var getHolidayCount = (from a in db.Holidays where a.HolidayDate == Sdate.Date select a.HolidayDate).Count();
if (getHolidayCount > 0)
{
isCount = Convert.ToString(getHolidayCount);
}
}
Sdate = Sdate.AddDays(1);
}
var res = new JsonResult();
res.Data = new
{
isCount = isCount
};
return res;
}
I hope it will help others too.

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.

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);