Curious84
asked on
Calendar function to input a data into a text field from a pop up calendar
Hi,
I need a calendar function thing to have a data input into a text field to them be saved into the db. I want the calendar to make sure the users do not enter an invalid format.
Does anyone know of any good scripts or sites?
I need a calendar function thing to have a data input into a text field to them be saved into the db. I want the calendar to make sure the users do not enter an invalid format.
Does anyone know of any good scripts or sites?
Whats is the name of your field you want to have the date input to?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<html>
<head>
<title>
Calendar
</title>
<style>
.Calendar{
background-color:rgb(150,1 94,223);
}
td,select,.CalButton,.Smal lFont{
Font-Family: verdana;
Font-Size: 8pt;
Color:black;
Text-Decoration:None;
}
.CalButtonToday{
Color:red;
}
</style>
</head>
<body leftmargin="12px" topmargin="12px" class=Calendar onload="WriteMonth(Month,Y ear);">
<form name=CalendarForm id=CalendarForm>
<table>
<tr>
<td colspan=7 align=right nowrap>
<font face=verdana size=1>
<select class=caldropdown id=cboMonth name=cboMonth onchange="SetMonth();">
<option>September</option>
<option></option>
<option></option>
</select>
</font>
<font face=verdana size=1>
<select class=caldropdown id=cboYear name=cboYear onchange="SetMonth();">
<option>2002</option>
<option></option>
<option></option>
</select>
<font face=verdana size=1>
</td>
</tr>
</table>
</form>
<div class=Calendar id=ButtonPanel name=ButtonPanel style="Position:absolute;L eft:13;Top :43;"></di v>
</body>
</html>
<script>
var objOpener = window.opener;
var NN6 = (document.getElementById && navigator.appName.indexOf( "Netscape" )>=0 )? true: false;
var NN4 = (navigator.appName.indexOf ("Netscape ")>=0 && !document.getElementById)? true : false;
function ReturnDate(CONTROL){
DAY = CONTROL.toString();
MONTH = (parseInt(CalendarForm.cbo Month.opti ons[Calend arForm.cbo Month.sele ctedIndex] .value) + 1);
YEAR = CalendarForm.cboYear.optio ns[Calenda rForm.cboY ear.select edIndex].v alue;
var DateOutput = FormatDate();
objOpener.SetDate(DateOutp ut);
window.close();
} //End Function
function FormatDate(){
var FormatAs = objOpener.FormatAs;
switch (FormatAs){
case "dd/mm/yyyy":
FillZero();
return DAY + "/" + MONTH + "/" + YEAR;
case "mm/dd/yyyy":
FillZero();
return MONTH + "/" + DAY + "/" + YEAR;
case "dd/mmm/yyyy":
return DAY + " " + arrMonths[MONTH -1].substring(0,3) + " " + YEAR;
case "mmm/dd/yyyy":
return arrMonths[MONTH -1].substring(0,3) + " " + DAY + " " + YEAR;
case "dd/mmmm/yyyy":
return DAY + " " + arrMonths[MONTH -1] + " " + YEAR;
case "mmmm/dd/yyyy":
return arrMonths[MONTH -1] + " " + DAY + " " + YEAR;
}
return DAY + "/" + MONTH + "/" + YEAR;
}//End Function
function FillZero(){
if(DAY.length < 2){
DAY = "0" + DAY;
}
if(MONTH.toString().length < 2){
MONTH = "0" + MONTH;
}
}//End Function
var Today = new Date();
var Day = Today.getDay();
var Month = Today.getMonth();
var Year = Today.getFullYear();
var strDays = "Monday,Tuesday,Wednesday, Thursday,F riday,Satu rday,Sunda y";
var arrDays = strDays.split(",");
var strMonths = "January,February,March,Ap ril,May,Ju ne,July,Au gust,Septe mber,Octob er,Novembe r,December ";
var arrMonths = strMonths.split(",");
var CalendarForm = document.CalendarForm;
var IsToday = Today.getDate() + "/" + (Month + 1) + "/" + Year;
var StartYear;
var EndYear;
StartYear = parseInt(objOpener.StartYe ar);
EndYear = parseInt(objOpener.EndYear );
if(!StartYear){
StartYear = Year - 50;
}
if(!EndYear){
EndYear = Year + 1;
}
FillYears(StartYear,EndYea r);
FillMonths();
WriteMonth(Month,Year);
function FillMonths(){
for(var i = 0; i < arrMonths.length;i++){
CalendarForm.cboMonth.opti ons[i] = new Option(arrMonths[i], i);
}
CalendarForm.cboMonth.opti ons[Month] .selected = true;
}
function FillYears(START_YEAR,END_Y EAR){
START_YEAR = parseInt(START_YEAR);
END_YEAR = parseInt(END_YEAR);
var i =0;
while(START_YEAR <= END_YEAR){
CalendarForm.cboYear.optio ns[i] = new Option(START_YEAR, START_YEAR);
if(START_YEAR==Year){
CalendarForm.cboYear.optio ns[i].sele cted = true;
}
START_YEAR +=1;
i+=1;
}
} //End Function
function SetMonth(){
WriteMonth(CalendarForm.cb oMonth.sel ectedIndex ,CalendarF orm.cboYea r.options[ CalendarFo rm.cboYear .selectedI ndex].valu e);
}
function WriteMonth(MONTH,YEAR){
var CELLSPACING = 0;
if(NN6){
CELLSPACING = 1;
}
var strCalendar = "<table border=0 cellspacing=0 cellpadding=" + CELLSPACING + ">";
strCalendar += "<tr>";
for(var i = 0; i < arrDays.length; i++){
strCalendar += "<td class=SmallFont align=center>" + arrDays[i].substring(0,2) + "</td>";
}
strCalendar += "</tr>";
var strTemp = "1 " + arrMonths[MONTH] + " " + YEAR;
var DateTemp = new Date(strTemp);
var FirstDay = DateTemp.getDay();
var iStart;
if(FirstDay==0){
FirstDay=6;
}
else{
FirstDay = FirstDay - 1;
}
for(var RowCount = 0; RowCount < 42; RowCount = RowCount + 7){
strCalendar += "<tr>";
for(var i = RowCount; i < (RowCount + 7);i++){
strTemp = ((i-FirstDay) + 1) + "/" + (MONTH + 1) + "/" + YEAR;
if(i >= FirstDay && i < (31 + FirstDay)){
if(isDate(strTemp)){
strCalendar += "<td align=center width=15%>";
if(strTemp == IsToday && EndYear > Year-1){
strCalendar += "<a class=CalButtonToday href='#' onclick='ReturnDate(" + ((i-FirstDay) + 1) + ");'>" + ((i-FirstDay) + 1);
}
else{
strCalendar += "<a class=CalButton href='#' onclick='ReturnDate(" + ((i-FirstDay) + 1) + ");'>" + ((i-FirstDay) + 1);
}
strCalendar += "</td>";
}
else{
strCalendar += "<td width=15%> </td>";
}
}
else{
strCalendar += "<td width=15%> </td>";
}
}//End For
strCalendar += "</tr>";
}
strCalendar += "</table>";
WriteInnerHTML("ButtonPane l",strCale ndar);
} //End Function
function isDate(DateToCheck){
var arrDate = DateToCheck.split("/");
var myDAY = arrDate[0];
var myMONTH = arrDate[1];
var myYEAR = arrDate[2];
var strDate;
strDate = myMONTH + "/" + myDAY + "/" + myYEAR;
var testDate=new Date(strDate);
if(testDate.getMonth()+1== myMONTH){
return true;
}
else{
return false;
}
}//end function
function WriteInnerHTML(ElementID, Value){
if(document.getElementById ){
document.getElementById(El ementID).i nnerHTML = Value;
}
else if(document.all){
document.all[ElementID].in nerHTML = Value;
}
else if(NN4){
document.layers[ElementID] .document. open();
document.layers[ElementID] .document. write(Valu e);
document.layers[ElementID] .document. close();
}
}
if(NN6){
document.getElementById("B uttonPanel ").style.t op= 33;
document.getElementById("B uttonPanel ").style.l eft= 25;
}
</script>
<head>
<title>
Calendar
</title>
<style>
.Calendar{
background-color:rgb(150,1
}
td,select,.CalButton,.Smal
Font-Family: verdana;
Font-Size: 8pt;
Color:black;
Text-Decoration:None;
}
.CalButtonToday{
Color:red;
}
</style>
</head>
<body leftmargin="12px" topmargin="12px" class=Calendar onload="WriteMonth(Month,Y
<form name=CalendarForm id=CalendarForm>
<table>
<tr>
<td colspan=7 align=right nowrap>
<font face=verdana size=1>
<select class=caldropdown id=cboMonth name=cboMonth onchange="SetMonth();">
<option>September</option>
<option></option>
<option></option>
</select>
</font>
<font face=verdana size=1>
<select class=caldropdown id=cboYear name=cboYear onchange="SetMonth();">
<option>2002</option>
<option></option>
<option></option>
</select>
<font face=verdana size=1>
</td>
</tr>
</table>
</form>
<div class=Calendar id=ButtonPanel name=ButtonPanel style="Position:absolute;L
</body>
</html>
<script>
var objOpener = window.opener;
var NN6 = (document.getElementById && navigator.appName.indexOf(
var NN4 = (navigator.appName.indexOf
function ReturnDate(CONTROL){
DAY = CONTROL.toString();
MONTH = (parseInt(CalendarForm.cbo
YEAR = CalendarForm.cboYear.optio
var DateOutput = FormatDate();
objOpener.SetDate(DateOutp
window.close();
} //End Function
function FormatDate(){
var FormatAs = objOpener.FormatAs;
switch (FormatAs){
case "dd/mm/yyyy":
FillZero();
return DAY + "/" + MONTH + "/" + YEAR;
case "mm/dd/yyyy":
FillZero();
return MONTH + "/" + DAY + "/" + YEAR;
case "dd/mmm/yyyy":
return DAY + " " + arrMonths[MONTH -1].substring(0,3) + " " + YEAR;
case "mmm/dd/yyyy":
return arrMonths[MONTH -1].substring(0,3) + " " + DAY + " " + YEAR;
case "dd/mmmm/yyyy":
return DAY + " " + arrMonths[MONTH -1] + " " + YEAR;
case "mmmm/dd/yyyy":
return arrMonths[MONTH -1] + " " + DAY + " " + YEAR;
}
return DAY + "/" + MONTH + "/" + YEAR;
}//End Function
function FillZero(){
if(DAY.length < 2){
DAY = "0" + DAY;
}
if(MONTH.toString().length
MONTH = "0" + MONTH;
}
}//End Function
var Today = new Date();
var Day = Today.getDay();
var Month = Today.getMonth();
var Year = Today.getFullYear();
var strDays = "Monday,Tuesday,Wednesday,
var arrDays = strDays.split(",");
var strMonths = "January,February,March,Ap
var arrMonths = strMonths.split(",");
var CalendarForm = document.CalendarForm;
var IsToday = Today.getDate() + "/" + (Month + 1) + "/" + Year;
var StartYear;
var EndYear;
StartYear = parseInt(objOpener.StartYe
EndYear = parseInt(objOpener.EndYear
if(!StartYear){
StartYear = Year - 50;
}
if(!EndYear){
EndYear = Year + 1;
}
FillYears(StartYear,EndYea
FillMonths();
WriteMonth(Month,Year);
function FillMonths(){
for(var i = 0; i < arrMonths.length;i++){
CalendarForm.cboMonth.opti
}
CalendarForm.cboMonth.opti
}
function FillYears(START_YEAR,END_Y
START_YEAR = parseInt(START_YEAR);
END_YEAR = parseInt(END_YEAR);
var i =0;
while(START_YEAR <= END_YEAR){
CalendarForm.cboYear.optio
if(START_YEAR==Year){
CalendarForm.cboYear.optio
}
START_YEAR +=1;
i+=1;
}
} //End Function
function SetMonth(){
WriteMonth(CalendarForm.cb
}
function WriteMonth(MONTH,YEAR){
var CELLSPACING = 0;
if(NN6){
CELLSPACING = 1;
}
var strCalendar = "<table border=0 cellspacing=0 cellpadding=" + CELLSPACING + ">";
strCalendar += "<tr>";
for(var i = 0; i < arrDays.length; i++){
strCalendar += "<td class=SmallFont align=center>" + arrDays[i].substring(0,2) + "</td>";
}
strCalendar += "</tr>";
var strTemp = "1 " + arrMonths[MONTH] + " " + YEAR;
var DateTemp = new Date(strTemp);
var FirstDay = DateTemp.getDay();
var iStart;
if(FirstDay==0){
FirstDay=6;
}
else{
FirstDay = FirstDay - 1;
}
for(var RowCount = 0; RowCount < 42; RowCount = RowCount + 7){
strCalendar += "<tr>";
for(var i = RowCount; i < (RowCount + 7);i++){
strTemp = ((i-FirstDay) + 1) + "/" + (MONTH + 1) + "/" + YEAR;
if(i >= FirstDay && i < (31 + FirstDay)){
if(isDate(strTemp)){
strCalendar += "<td align=center width=15%>";
if(strTemp == IsToday && EndYear > Year-1){
strCalendar += "<a class=CalButtonToday href='#' onclick='ReturnDate(" + ((i-FirstDay) + 1) + ");'>" + ((i-FirstDay) + 1);
}
else{
strCalendar += "<a class=CalButton href='#' onclick='ReturnDate(" + ((i-FirstDay) + 1) + ");'>" + ((i-FirstDay) + 1);
}
strCalendar += "</td>";
}
else{
strCalendar += "<td width=15%> </td>";
}
}
else{
strCalendar += "<td width=15%> </td>";
}
}//End For
strCalendar += "</tr>";
}
strCalendar += "</table>";
WriteInnerHTML("ButtonPane
} //End Function
function isDate(DateToCheck){
var arrDate = DateToCheck.split("/");
var myDAY = arrDate[0];
var myMONTH = arrDate[1];
var myYEAR = arrDate[2];
var strDate;
strDate = myMONTH + "/" + myDAY + "/" + myYEAR;
var testDate=new Date(strDate);
if(testDate.getMonth()+1==
return true;
}
else{
return false;
}
}//end function
function WriteInnerHTML(ElementID, Value){
if(document.getElementById
document.getElementById(El
}
else if(document.all){
document.all[ElementID].in
}
else if(NN4){
document.layers[ElementID]
document.layers[ElementID]
document.layers[ElementID]
}
}
if(NN6){
document.getElementById("B
document.getElementById("B
}
</script>
ASKER
Thanks guys,
apesto im gonna use your code with the picture of the calendar from scribver dude's site. Looks better than just "Calendar" :op.
Thanks again
apesto im gonna use your code with the picture of the calendar from scribver dude's site. Looks better than just "Calendar" :op.
Thanks again
:)) Glad it was useful! Thanks for the points ;-)
Good luck,
:) SD
Good luck,
:) SD