[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Calendar function to input a data into a text field from a pop up calendar

Posted on 2004-11-15
6
Medium Priority
?
346 Views
Last Modified: 2008-02-01
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?
0
Comment
Question by:Curious84
  • 3
  • 2
6 Comments
 
LVL 23

Expert Comment

by:apresto
ID: 12588420
Whats is the name of your field you want to have the date input to?
0
 
LVL 11

Assisted Solution

by:sciber_dude
sciber_dude earned 280 total points
ID: 12588449
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
 
LVL 23

Accepted Solution

by:
apresto earned 1400 total points
ID: 12588456
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 23

Expert Comment

by:apresto
ID: 12588460
<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
 

Author Comment

by:Curious84
ID: 12588550
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
 
LVL 11

Expert Comment

by:sciber_dude
ID: 12588580
:)) Glad it was useful! Thanks for the points ;-)

Good luck,
:) SD
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
Integration Management Part 2

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question