•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the ASP section within the Web Development category of DaniWeb, a massive community of 422,978 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,913 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our ASP advertiser: Lunarpages ASP Web Hosting
Views: 4702 | Replies: 3
![]() |
| |
•
•
Join Date: Jul 2005
Location: Dallas, TX
Posts: 481
Reputation:
Rep Power: 4
Solved Threads: 19
here,
save this in a file called pc.js
here is an example of how to use it
save this in a file called pc.js
var calWindow;
var targetField;
var today = new Date();
var dayofmonth = today.getDate();
var startDate;
var selectDate;
var prevMonth;
var prevYear;
var currMonth;
var currYear;
var nextMonth;
var nextYear;
var days = new Array('Sun','Mon','Tue','Wed','Thr','Fri','Sat');
var months = new makeArray(12);
function makeArray(arrayLength) { // create empty array
this.length = arrayLength;
for (var i = 1; i <= arrayLength; i++)
this[i] = 0;
return this;
}
function month(name, length, index) { // create month object
// properties
this.name = name;
this.length = length;
this.index = index;
// method
this.getFirstMonthDay = getFirstMonthDay;
}
function makeMonthArray() { // create array of 12 month objects
months[1] = new month("January", 31, 0);
months[2] = new month("February", 28, 1);
months[3] = new month("March", 31, 2);
months[4] = new month("April", 30, 3);
months[5] = new month("May", 31, 4);
months[6] = new month("June", 30, 5);
months[7] = new month("July", 31, 6);
months[8] = new month("August", 31, 7);
months[9] = new month("September", 30, 8);
months[10] = new month("October", 31, 9);
months[11] = new month("November", 30, 10);
months[12] = new month("December", 31, 11);
}
function initCalendar() {
makeMonthArray();
// startDate='9/9/2002';
if (selectDate == "") {
if (startDate == "") {
currMonth = today.getMonth() - 0 + 1;
currYear = today.getFullYear();
selectDate = currMonth + "/" + dayofmonth + "/" + currYear;
}
else
selectDate = startDate;
}
if (startDate == "")
startDate = selectDate;
curDat = new Date(startDate);
if (isNaN(curDat)){curDat = new Date();} // if startDate not a valid date, set to current date
currMonth = curDat.getMonth() - 0 + 1;
currYear = curDat.getFullYear();
// currMonth = startDate.substring(0, startDate.indexOf("/"));
// currYear = startDate.substring(startDate.lastIndexOf("/")+1, startDate.length);
if (currYear<1950) {currYear = currYear + 100;}
// if (currYear < 51) {currYear = 20 + currYear;}
// else {currYear = 19 + currYear;} }
//Determines previous month and year for Prev button on calendar
prevMonth = currMonth - 1;
if (prevMonth == 0) {
prevMonth = 12;
prevYear = currYear - 1;
}
else // set month to prev month
prevYear = currYear;
//Determines next month and year for Next button on calendar
nextMonth = currMonth - 0 + 1;
if (nextMonth == 13) {
nextMonth = 1;
nextYear = currYear - 0 + 1;
}
else // set month to next month
nextYear = currYear;
}
function getFirstMonthDay(theYear) { // get week-day of first day of month
var firstDay = new Date(theYear, this.index, 1);
return firstDay.getDay();
}
function getNumFebDays(theYear) { // calc num days in February
if ((theYear % 4 == 0 && theYear % 100 != 0) || theYear % 400 == 0)
return 29;
else
return 28;
}
function calendarHref(direction) {
var m;
var y;
switch (direction){
case -1:
m = prevMonth;
y = prevYear;
break;
case 1:
m = nextMonth;
y = nextYear;
break;
}
retVal = "javascript:window.opener.popupCalendar('"+targetField+"','"+m+"/1/"+y+"','"+selectDate+"');"
return retVal
}
function drawCalendar() { // draw day numbers in cal table
var theYear = currYear;
var month = currMonth;
if (month == 2)
months[2].length = getNumFebDays(theYear - 1900);
var firstMonthDay = months[month].getFirstMonthDay(theYear);
var numMonthDays = months[month].length;
// to keep count of how many days we have displayed in each month
var daycounter = 1;
// style sheet
calWindow.document.write("<STYLE type=text/css>");
calWindow.document.write(".TABLEHEAD {BACKGROUND-COLOR: #6666FF; COLOR: #FFFFFF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
calWindow.document.write(".DAYS {BACKGROUND-COLOR: #9999FF; COLOR: #000099; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
calWindow.document.write(".SELECTED {BACKGROUND-COLOR: #CCCCFF; COLOR: #0000FF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
calWindow.document.write(".ANOTHERMONTH {BACKGROUND-COLOR: #EEEEFF; COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: normal}");
calWindow.document.write(".TODAY {BACKGROUND-COLOR: #CCCCFF; COLOR: #FF0000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
calWindow.document.write(".CURRENTMONTH {BACKGROUND-COLOR: #CCCCFF; COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: normal}");
calWindow.document.write(".INPUT {BACKGROUND-COLOR: #3333FF; COLOR: #FFFFFF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
calWindow.document.write("</STYLE>");
// basic table html
calWindow.document.write( "<TABLE border=1 borderColor=#ffffff cellPadding=4 cellSpacing=0");
// writes a Prev link, month and year, and Next Link
calWindow.document.write("<TR align=center>");
calWindow.document.write("<TD colspan=1 CLASS=TABLEHEAD><A CLASS=TABLEHEAD HREF=" + calendarHref(-1) + "><<</a></td>");
calWindow.document.write("<TD align=center colspan=5 CLASS=TABLEHEAD><B>" + months[month].name + " " + currYear + "</B></TD>");
calWindow.document.write("<TD colspan=1 CLASS=TABLEHEAD><A CLASS=TABLEHEAD HREF=" + calendarHref(1) + ">>></a></td>");
calWindow.document.write("</TR>");
// writes the days of the week
calWindow.document.write("<TR align=center bgcolor=#EEEEEE>");
for(var d=0;d<7;d++)
calWindow.document.write("<TD width=14% CLASS=DAYS><SMALL><B> " + days[d] + " </B></SMALL></TD>");
calWindow.document.write("</TR>");
// allows month to possibly span over 6 weeks
for(var i=0; i<6; i++) {
calWindow.document.write("<TR align=center>");
// display each day of the week
for(var j=0;j<7;j++) {
var tMonth, tDay, tYear, tDate;
// if we are not displaying the current month
if( (i==0 && j<firstMonthDay) || daycounter>months[month].length ) {
if (daycounter>months[month].length) {
tMonth = nextMonth;
tDay = daycounter-months[month].length;
tYear = nextYear;
daycounter++;
}
else {
tMonth = prevMonth;
tDay = months[prevMonth].length-firstMonthDay+1+j;
tYear = prevYear;
}
tDate = tMonth + "/" + tDay + "/" + tYear;
tClass = "ANOTHERMONTH";
//if we are displaying the current date
}
else if((daycounter==today.getDate()) && (currMonth==today.getMonth()-0+1) && (currYear==today.getYear())) {
tDay = daycounter;
tDate = currMonth + "/" + daycounter + "/" + currYear;
tClass = "TODAY";
daycounter++;
// if we are displaying the current month
}
else {
tDay = daycounter;
tDate = currMonth + "/" + daycounter + "/" + currYear;
tClass = "CURRENTMONTH";
daycounter++;
}
if (selectDate == tDate)
tClass = "SELECTED";
calWindow.document.write("<TD width=14% CLASS=" + tClass + "><A CLASS=" + tClass + " HREF=" + "javascript:window.opener.document."+targetField+".value='"+tDate+"';window.close();" + ">" + tDay + "</A></TD>");
}
calWindow.document.write("</TR>");
}
calWindow.document.write("</TABLE>");
}
function popupCalendar(target, start, select) {
targetField = target;
startDate = start;
selectDate = select;
var w=250; var h=230; var t; var l;
if (navigator.appName=="Microsoft Internet Explorer"){
t = (document.calimg.offsetTop + window.screenTop) -60;
l = (document.calimg.offsetLeft + window.screenLeft) -10;
} else {
t = (document.calimg.offsetTop + screenY)-400;
l = (document.calimg.offsetLeft + screenX);
}
calWindow = window.open("", "Calendar", "width="+w+",height="+h+",status=yes,resizable=no,top="+t+",left="+l);
calWindow.opener = self;
calWindow.focus();
calWindow.document.close();
initCalendar();
drawCalendar();
}here is an example of how to use it
<html>
<head>
<script language=JavaScript src="pc.js"></script>
</head>
<body>
<form name="FormName">
<td valign=top width=100>From:
<a href="javascript:popupCalendar('FormName.txtBegDate', 'document.FormName.txtBegDate.value','');" onmouseover="window.status='Popup Calendar';return true;" onmouseout="window.status='';return true;"><img name='calimg' src='cal.gif' width=16 height=16 border=0></a><br><input type=text name='txtBegDate' size=6 maxlength=10 value='5/1/2006'></td>
</form>
</body>
<html>•
•
Join Date: Mar 2005
Location: LTT, South Africa
Posts: 125
Reputation:
Rep Power: 4
Solved Threads: 1
the calendar / popup page
how to use:
***** goes right at the bottom or where the scripts thing goes in the page*****
on my codeing i always put the calendar pages in a "calender" folder... so the above popup page is called cal.asp in the calender folder.
the calendar giff is just an image. the "insertdate" part is what i called the form input field.
i managed to modify this code a bit to pull records from the db using a recordset. so for instance it can show important dates etc. the other persons post is cleaner though
<%@ Language=VBScript %>
<%Option Explicit%>
<%
Dim m_dtCurrentDate 'Currently selected date/time
Dim m_lDayofFirst 'The day of the week that the first of the current month falls on
Dim m_lDaysInMonth 'Number of days in the selected month
Dim m_dtBegin 'Beginning date of the selected month
Dim m_dtEnd 'Ending date of the selected month
Dim m_lYear 'Currently selected Year
Dim m_lMonth 'Currently selected Month
Dim m_lDay 'Currently selected Day of the month
Dim m_sInputName 'Name of the input field from the parent page
Dim m_dtPassedInDate
m_sInputName = Request.QueryString("N")
'Build the date/time from individual parts if there has been a post back.
'Otherwise, just get the current date/time.
If Request.QueryString("A") <> "" Then
m_lYear = Request.Form("fldYear")
m_lMonth = Request.Form("fldMonth")
m_lDay = Request.Form("fldDay")
'Fix the day of the month if we switch from a month that has less days in the month
'than the previously selected month and the day selected is not on the newly selected
'month (ie - going from March 31st and then selecting February which does not have a 31st.)
m_dtBegin = m_lMonth & "/1/" & m_lYear
m_dtEnd = DateAdd("m", 1, m_dtBegin)
m_lDaysInMonth = DateDiff("d", m_dtBegin, m_dtEnd)
If CLng(m_lDay) > CLng(m_lDaysInMonth) Then m_lDay = m_lDaysInMonth
'Build the Date
m_dtCurrentDate = m_lMonth & "/" & m_lDay & "/" & m_lYear
Dim formatofdate
formatofdate = m_lDay&" "&MonthName(m_lMonth)&" "&m_lYear
'If the date is not valid after all this then use the current date.
If IsDate(m_dtCurrentDate) Then
m_dtCurrentDate = CDate(m_dtCurrentDate)
Else
m_dtCurrentDate = Now()
End If
Else
m_dtPassedInDate = Request.QueryString("DT")
If CStr(m_dtPassedInDate) <> "" Then
If IsDate(m_dtPassedInDate) Then
m_dtCurrentDate = CDate(m_dtPassedInDate)
Else
m_dtCurrentDate = Date()
End If
Else
m_dtCurrentDate = Date()
End If
End If
'Break out certain parts of the currently selected date/time.
m_lYear = DatePart("yyyy", m_dtCurrentDate)
m_lMonth = DatePart("m", m_dtCurrentDate)
m_lDay = DatePart("d", m_dtCurrentDate)
m_dtBegin = CDate(DatePart("m", m_dtCurrentDate) & "/1/" & DatePart("yyyy", m_dtCurrentDate))
m_dtEnd = DateAdd("m", 1, m_dtBegin)
m_lDayofFirst = DatePart("w", m_dtBegin)
m_lDaysInMonth = DateDiff("d", m_dtBegin, m_dtEnd)
%>
<HTML>
<HEAD>
<TITLE>Choose a date/time</TITLE>
<LINK rel="stylesheet" type="text/css" href="Calendar.css">
</HEAD>
<BODY bgcolor="#D4D0C8">
<FORM method=post action="?A=1&N=<%=m_sInputName%>" id=Form1 name=Form1>
<table class=overall cellpadding=0 cellspacing=10>
<tr>
<td>
<%DisplayCalendar%>
</td>
<td valign=top>
<table>
<tr>
<td class="Title">
Month:<BR>
</td>
<td class="Title">
Year:<BR>
</td>
</tr>
<tr>
<td>
<SELECT id=fldMonth name=fldMonth onchange="javascript:document.Form1.submit();">
<%DisplayMonths%>
</SELECT>
</td>
<td>
<INPUT type="text" id=fldYear name=fldYear value="<%=m_lYear%>" size=3 maxlength=4 onblur="javascript:document.Form1.submit();"><BR>
</td>
</tr>
<tr>
<td colspan=2 class="Title">
</td>
</tr>
<tr>
<td colspan=2>
</td>
</tr>
</table>
<p><BR>
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><input type="button" value="OK" id=cmdOK name=cmdOK class=Button onClick="javascript:SetDateOnParent();"></td>
<td><input type="button" value="Cancel" id=cmdCancel name=cmdCancel class=Button onClick="javascript:window.close();"></td>
</tr>
</table>
<p> </td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
<%
Sub DisplayMonths
Dim arrMonths 'An array of months starting with January
Dim i 'counter
arrMonths = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
For i = 0 To UBound(arrMonths)
If CLng(i) = (CLng(m_lMonth) - 1) Then
Response.Write "<OPTION value=" & i + 1 & " SELECTED>" & arrMonths(i) & "</OPTION>"
Else
Response.Write "<OPTION value=" & i + 1 & ">" & arrMonths(i) & "</OPTION>"
End If
Next
End Sub
Sub DisplayCalendar
Dim arrDays 'An array of days starting with Sunday
Dim i 'counter
Dim lColumnCount 'Column Count
Dim lNumber 'For building the calendar
Dim bFinished 'For building the calendar
Dim bStart 'For building the calendar
arrDays = Array("S", "M", "T", "W", "T", "F", "S")
Response.Write "<table width=100 class='Calendar' cellpadding=4 cellspacing=0><tr class=Header>"
For i = 0 to Ubound(arrDays)
Response.write "<td>" & arrDays(i) & "</td>"
Next
lNumber = 1
bFinished = False
bStart = False
Do
Response.Write "<tr>"
For lColumnCount = 1 to 7
If CLng(lColumnCount) = CLng(m_lDayofFirst) Then
bStart = True
End If
If CLng(m_lDay) = CLng(lNumber) AND CBool(bStart) Then
Response.Write "<td class=SelectedDay>"
Response.Write "<input name=fldDay type=hidden value=" & lNumber & ">"
Else
Response.Write "<td class=NormalDay>"
End If
If NOT CBool(bFinished) AND CBool(bStart) Then
If CLng(m_lDay) <> CLng(lNumber) Then
Response.Write "<A href='javascript:ChangeDay(" & lNumber & ");'>"
End If
Response.Write lNumber
If CLng(m_lDay) <> CLng(lNumber) Then
Response.Write "</A>"
End If
lNumber = lNumber + 1
If CLng(lNumber) > CLng(m_lDaysInMonth) Then
bFinished = True
End If
Else
Response.Write " "
End If
Response.Write "</td>"
Next
Response.Write "</tr>"
Loop Until CBool(bFinished)
Response.Write "</tr></table>"
End Sub
%>
<script language="javascript">
function ChangeDay(v_lDay) {
document.Form1.fldDay.value = v_lDay;
document.Form1.submit();
}
function SetDateOnParent() {
var sRetDateTime;
sRetDateTime = '<%=formatofdate%> '
window.opener.eval('<%=m_sInputName%>').value = sRetDateTime;
window.close();
}
window.onload = function () {
document.focus()
}
</script>how to use:
***** goes right at the bottom or where the scripts thing goes in the page*****
<script language="javascript">
function CalPop(sInputName)
{
window.open('calendar/Cal.asp?N=' + escape(sInputName) + '&DT=' + escape(window.eval(sInputName).value), 'CalPop', 'toolbar=0,width=378,height=225');
}
</script>on my codeing i always put the calendar pages in a "calender" folder... so the above popup page is called cal.asp in the calender folder.
<input name="insertdate" type="text" id="insertdate" value="" >
<a href="javascript:CalPop('document.formname.insertdate');"><img src="calendar/icon_Cal.gif" border="0" width="18" height="18" /></a>the calendar giff is just an image. the "insertdate" part is what i called the form input field.
i managed to modify this code a bit to pull records from the db using a recordset. so for instance it can show important dates etc. the other persons post is cleaner though
![]() |
•
•
•
•
•
•
•
•
DaniWeb ASP Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
- DOB field-how to use text field and pop out calendar same time? (ASP)
- I want to Edit Calendar Class in ASP.NET (ASP.NET)
- Edit Calendar (ASP.NET)
- Error message when running ASP email script (ASP)
Other Threads in the ASP Forum
- Previous Thread: Javascript: Connecting to database
- Next Thread: VBScript: Focusing on a form control


Hybrid Mode