Link to home
Start Free TrialLog in
Avatar of Curious84
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?
Avatar of apresto
apresto
Flag of Italy image

Whats is the name of your field you want to have the date input to?
SOLUTION
Avatar of sciber_dude
sciber_dude
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
<html>
<head>
<title>
Calendar
</title>
<style>
.Calendar{
background-color:rgb(150,194,223);
}
td,select,.CalButton,.SmallFont{
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,Year);">
<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;Left:13;Top:43;"></div>

</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.cboMonth.options[CalendarForm.cboMonth.selectedIndex].value) + 1);
YEAR = CalendarForm.cboYear.options[CalendarForm.cboYear.selectedIndex].value;
var DateOutput = FormatDate();
objOpener.SetDate(DateOutput);
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,Friday,Saturday,Sunday";
var arrDays = strDays.split(",");
var strMonths = "January,February,March,April,May,June,July,August,September,October,November,December";
var arrMonths = strMonths.split(",");
var CalendarForm = document.CalendarForm;
var IsToday = Today.getDate() + "/" + (Month + 1) + "/" + Year;
var StartYear;
var EndYear;


StartYear = parseInt(objOpener.StartYear);
EndYear = parseInt(objOpener.EndYear);


if(!StartYear){
StartYear = Year - 50;
}
if(!EndYear){
EndYear = Year + 1;
}

FillYears(StartYear,EndYear);

FillMonths();
WriteMonth(Month,Year);


function FillMonths(){
for(var i = 0; i < arrMonths.length;i++){
CalendarForm.cboMonth.options[i] = new Option(arrMonths[i], i);
}
CalendarForm.cboMonth.options[Month].selected = true;
}

function FillYears(START_YEAR,END_YEAR){
START_YEAR = parseInt(START_YEAR);
END_YEAR = parseInt(END_YEAR);
var i =0;
while(START_YEAR <= END_YEAR){
CalendarForm.cboYear.options[i] = new Option(START_YEAR, START_YEAR);
if(START_YEAR==Year){
CalendarForm.cboYear.options[i].selected = true;
}

START_YEAR +=1;
i+=1;
}

} //End Function

function SetMonth(){
WriteMonth(CalendarForm.cboMonth.selectedIndex,CalendarForm.cboYear.options[CalendarForm.cboYear.selectedIndex].value);
}

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("ButtonPanel",strCalendar);

} //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(ElementID).innerHTML = Value;
}
else if(document.all){
document.all[ElementID].innerHTML = Value;
}
else if(NN4){
document.layers[ElementID].document.open();
document.layers[ElementID].document.write(Value);
document.layers[ElementID].document.close();
}
}


if(NN6){
document.getElementById("ButtonPanel").style.top= 33;
document.getElementById("ButtonPanel").style.left= 25;
}

</script>
Avatar of Curious84
Curious84

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

:)) Glad it was useful! Thanks for the points ;-)

Good luck,
:) SD