----Original Message-----
From: Subhas Chakraborty [mailto:chakrabortysubhas@h...]
Sent: 17 July 2000 10:32
To: charlottes@w...
Subject: Javascript - Calender Control
I have made a calender control using javascript with ASP and sending this
along with source code for use in your site as a help material. This
control
is working fine with IE5 but not with Netscape 4. Please help me with a
browser independent solution.
You may mail me also at subhasc@t...
Subhas Chakraborty.
TestDT.HTM:++++++++++++++++++++++++++++++++++++++++++
HTML>
<script language=javascript>
var myCalender = new Object;
function getDate(target) {
myCalender.date="";
result=showModalDialog("calender.asp" ,
myCalender,"dialogheight:18em;dialogwidth:20em;statusbar:no;toolbar:no;menubar:no;location:no");
date = myCalender.date;
document.all(target).value=date;
}
</script>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<br>
<br>
<b>Insert Date:</b>
<input type="text" name="dt" readonly>
<input type="button" value="Show Calender" onclick="getDate('dt')">
</BODY>
</HTML>
Calendar.ASP:+++++++++++++++++++++++++++++++++++++++++++++++++
<%@ Language=VBScript %>
<HTML>
<script language=javascript>
function formatCal() {
var now =new Date();
var m = now.getMonth();
var y=now.getYear();
var d=getDays(m,y);
var firstDayOfMonth=new Date(y,m,1);
var firstDay=firstDayOfMonth.getDay()+1;
//alert(firstDay);
calcDays(d,firstDay);
document.frmcal.yr.value=y;
document.frmcal.month.options[m].selected=true;
}
function isLeapyear(y) {
if(y%100==0) {
if(y%400==0)
return true;
}
else if(y%4==0)
return true;
else
return false;
}
function getDays(m,y) {
var ar = new Array();
ar[0]=31;
ar[1]=isLeapyear(y)?29:28;
ar[2]=31;
ar[3]=30;
ar[4]=31;
ar[5]=30;
ar[6]=31;
ar[7]=31;
ar[8]=30;
ar[9]=31;
ar[10]=30;
ar[11]=31;
return ar[m];
}
function changeCalender() {
var y=document.frmcal.yr.value;
var m=document.frmcal.month.value;
document.frmcal.up.disabled=false;
document.frmcal.down.disabled=false;
if(m==11)
document.frmcal.up.disabled=true;
else if(m==0)
document.frmcal.down.disabled=true;
var firstDayOfMonth=new Date(y,m,1);
var firstDay=firstDayOfMonth.getDay()+1;
var d=getDays(m,y);
calcDays(d,firstDay);
}
function calcDays(d,firstday){
var exday;
exday=d+firstday-1;
var nm;
var j;
var count;
for(j=1;j<=35;j++)
{
nm="day" + j;
document.frmcal(nm).disabled=false;
document.frmcal(nm).value="";
}
for(j=firstday;j<=35;j++)
{
nm="day" + j;
//document.frmcal(nm).disabled=false;
if(j%7==1)
document.frmcal(nm).style.color="red"
document.frmcal(nm).value=(j-firstday+1);
}
/*for(i=d+1;i<=35;i++){
nm="day" + i;
document.all(nm).value="";
document.all(nm).disabled=true;
}*/
count=1;
if(exday > 35) {
//alert(j);
for(k=j;k<=exday;k++) {
nm="day" + count;
//document.frmcal(nm).disabled=false;
if(count%7==1)
document.frmcal(nm).style.color="red";
document.frmcal(nm).value=(k-firstday+1);
count++;
}
}
for(i=d+firstday;i<=35;i++){
nm="day" + i;
document.frmcal(nm).value="";
document.frmcal(nm).disabled=true;
}
for(i=1;i<=35;i++){
nm="day" + i;
if(document.frmcal(nm).value=="") {
document.frmcal(nm).value="*"
document.frmcal(nm).disabled=true;
}
}
}
function increaseMonth() {
if(checkYear()==false)
return;
if(document.frmcal.down.disabled)
document.frmcal.down.disabled=false;
document.frmcal.month.value++;
document.frmcal.month.options[document.frmcal.month.value].selected=true;
if(document.frmcal.month.value==11)
document.frmcal.up.disabled=true;
var d=getDays(document.frmcal.month.value,document.frmcal.yr.value);
var firstDayOfMonth=new
Date(document.frmcal.yr.value,document.frmcal.month.value,1);
var firstDay=firstDayOfMonth.getDay()+1;
calcDays(d,firstDay);
}
function decreaseMonth() {
if(checkYear()==false)
return;
if(document.frmcal.up.disabled)
document.frmcal.up.disabled=false;
document.frmcal.month.value--;
document.frmcal.month.options[document.frmcal.month.value].selected=true;
if(document.frmcal.month.value==0)
document.frmcal.down.disabled=true;
var d=getDays(document.frmcal.month.value,document.frmcal.yr.value);
var firstDayOfMonth=new
Date(document.frmcal.yr.value,document.frmcal.month.value,1);
var firstDay=firstDayOfMonth.getDay()+1;
calcDays(d,firstDay);
}
function yearCheck() {
if(document.frmcal.yr.value.length==2 && document.frmcal.yr.value==0)
document.frmcal.yr.value="20" + document.frmcal.yr.value;
else if(document.frmcal.yr.value.length==2)
document.frmcal.yr.value="19" + document.frmcal.yr.value;
if (document.frmcal.yr.value<1900 || document.frmcal.yr.value>9999) {
alert("Insert Proper Year!!");
document.frmcal.yr.focus();
document.frmcal.yr.select();
return;
}
if(document.frmcal.yr.value==1900)
document.frmcal.downyr.disabled=true;
if(document.frmcal.yr.value==9999)
document.frmcal.upyr.disabled=true;
var d=getDays(document.frmcal.month.value,document.frmcal.yr.value);
var firstDayOfMonth=new
Date(document.frmcal.yr.value,document.frmcal.month.value,1);
var firstDay=firstDayOfMonth.getDay()+1;
calcDays(d,firstDay);
}
function checkYear() {
if((document.frmcal.yr.value < 1900) || (document.frmcal.yr.value > 9999))
{
alert("Insert proper year!");
document.frmcal.yr.focus;
return false;
}
return true;
}
function increaseYr() {
document.frmcal.yr.value++;
document.frmcal.downyr.disabled=false;
if(document.frmcal.yr.value==9999)
document.frmcal.upyr.disabled=true;
var d=getDays(document.frmcal.month.value,document.frmcal.yr.value);
var firstDayOfMonth=new
Date(document.frmcal.yr.value,document.frmcal.month.value,1);
var firstDay=firstDayOfMonth.getDay()+1;
calcDays(d,firstDay);
}
function decreaseYr() {
document.frmcal.yr.value--;
document.frmcal.upyr.disabled=false;
if(document.frmcal.yr.value==1900)
document.frmcal.downyr.disabled=true;
var d=getDays(document.frmcal.month.value,document.frmcal.yr.value);
var firstDayOfMonth=new
Date(document.frmcal.yr.value,document.frmcal.month.value,1);
var firstDay=firstDayOfMonth.getDay()+1;
calcDays(d,firstDay);
}
function getDate(dayOfMonth){
var mon=document.frmcal.month.options[document.frmcal.month.value].text;
var date = mon + "-" + document.frmcal("day" + dayOfMonth).value + "-" +
document.frmcal.yr.value;
window.returnValue = true;
window.dialogArguments.date = date;
window.close();
}
function doCancel() {
window.returnValue = false;
window.close();
}
</script>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Calender</TITLE>
</HEAD>
<body onLoad="formatCal()">
<form name="frmcal">
<table style="width:220" align=center border=1 bgcolor=PapayaWhip>
<tr><td colspan=7 align=center bgcolor=SteelBlue><b>Year:</b><input
type=text name="yr" style="width:60" onblur="yearCheck()">
<input type=button name="upyr" value="Up" style="width:50;height:22"
onclick="increaseYr()">
<input type=button name="downyr" value="Down" style="width:50;height:22"
onclick="decreaseYr()"></td></tr>
<tr><td colspan=7 align=center bgcolor=DarkTurquoise><input type=button
name="down" value="<<" style="width:25" onclick="decreaseMonth()">
<b>Month:</b><select name="month" onchange="changeCalender()"
style="width:80">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mar</option>
<option value=3>Apr</option>
<option value=4>May</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Oct</option>
<option value=10>Nov</option>
<option value=11>Dec</option>
</select>
<input name="up" type=button value=">>" style="width:25"
onclick="increaseMonth()">
</td>
<tr>
<td><font color=red>Sun</font></td>
<td><font color=blue>Mon</font></td>
<td><font color=blue>Tue</font></td>
<td><font color=blue>Wed</font></td>
<td><font color=blue>Thu</font></td>
<td><font color=blue>Fri</font></td>
<td><font color=green>Sat</font></td>
</tr>
<% dim k
k=1
for i=1 to 5%>
<tr>
<%for j=1 to 7%>
<td align=center><input type=button name="day<%=k%>"
style="width:22;background-color:white" onclick='getDate("<%=k%>")'></td>
<%k=k+1
next
%>
</tr>
<%next%>
</table>
</form>
</body>
</HTML>
View Cart
