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?
Curious84Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

aprestoCommented:
Whats is the name of your field you want to have the date input to?
0
sciber_dudeCommented:
Here is a pop-up date picker. There are many availblle for free download online. you could google "Javascript Date Picker code"

http://javascript.internet.com/calendars/popup-date-picker.html

:) SD
0
aprestoCommented:
This is if the text field is called txtDate

Put this next to the field in the same TD and name your form theForm(also ID) - im not sure this will affect it but i have used this just incase:

<a href="Javascript:ShowCalendar('document.theForm.txtDate',1900,2030,'dd/mm/yyyy');">CALENDAR</a>

Put this at the bottom of your page RIGHT before the </body>:

<script>
var ControlToSet;
var theForm = document.theForm;
var CalWidth=180;
var StartYear = "";
var EndYear = "";
var FormatAs;
var NN4 = (navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false;
var NN6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var TOP;
var LEFT;

if(NN4)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = LogPosition;

function LogPosition(evt){

    if (NN4||NN6){
    LEFT=evt.screenX;
    TOP=evt.screenY-10;
    }
    else{
    LEFT=event.screenX;
    TOP=event.screenY-10;
    }

}


function ShowCalendar(CONTROL,START_YEAR,END_YEAR,FORMAT){

ControlToSet = eval(CONTROL);
StartYear = START_YEAR;
EndYear = END_YEAR;
FormatAs = FORMAT;

var strFeatures = "width=" + CalWidth + ",height=140" + ",left=" + LEFT + ",top=" + TOP;
var CalWindow = window.open("HTMLCalendar.htm","Calendar", strFeatures)
CalWindow.focus();
} //End Function

function SetDate(DATE){
if(ControlToSet){
ControlToSet.value = DATE;
}
ControlToSet = null;
StartYear = null;
EndYear = null;
FormatAs = null;
}

</script>

And ALSO create a page called HTMLcalendar.htm and put the following code in AS IS!:

...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

aprestoCommented:
<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>
0
Curious84Author Commented:
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

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

Good luck,
:) SD
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.