Date Dropdown With Checker

[Lambro]

I want to have a dropdown box that the user can select a date from. If they select June 22, 2004 I need the format of the value to be 040622 where 04 is the year, 06 is the month and 22 is the day. I also need a check on this field to not allow a date more then 10 days from the current date to be selected. So today is the 22nd, if the user selected the 27th it would be valid. Let's say the user selects July 3, 2004. Then the user sould be flagged that they must enter a date no more then 10 days of the current date. Also if the user selects a date prior the current date, the user needs to be flagged that they must enter a date equal or later then the current date. Thanks

 

[vbkris]

are u looking for a date picker (like one in the windows clock?), u have to download code for this, try a search on the web...

Known is handfull, Unknown is worldfull

 

[Lambro]

i have the date picker... I need the rest.

 

[vbkris]

how does it return the date???

Known is handfull, Unknown is worldfull

 

[Lambro]

When I select a date, it puts it to a textbox with the value: 06/22/2004 which would be June 22, 2004

 

[vbkris]

now can u give me the place where it puts it???
it will be something like this:
document.FormName.TextField.value=TheDate

if u give me that code, maybe i can modify it...

Known is handfull, Unknown is worldfull

 

[Lambro]

Here's my code for the selection of the date picker.

<a href="javascript:ShowCalendar(document.myform.dateimg1,document.myform.Date,null, '<%= FormatDateTime(DateAdd("yyyy", 0, now()),2)%>', '<%= FormatDateTime(DateAdd("yyyy", 1, now()),2)%>')" onClick=event.cancelBubble=true;><img align=top border=0 height=21 id=dateimg1 src="cal/calendar.gif" style="POSITION: relative" width=34></a>


If I select today, it returns 6/22/2004 in the textbox. How do I get it to return 06 instead of 6? and say the day was 8, how do I get it to return 08?

 

[vbkris]

sorry, the functions seems to takes this field:
document.myform.dateimg1,document.myform.Date

as a parameter, u may have to change the ShowCalendar function, can i have its code???

Known is handfull, Unknown is worldfull

 

[Spiny]

You get the number as an integer and put it through the following function:

function zero(number) {
	return (number < 10) ? "0" + number : number;
}

However, be aware that this will return a string rather than an integer.

Hope this helps,
Spiny

 

[Lambro]

The codes are listed below:
3 files:
calendar.js
calendar.htm
mypage.html




calendar.js

var zz, zv, d, fTSR;
var gBF=false;
var g_MINY = 1601;
var g_MAXY = 4500;
var g_month = 0;
var g_day = 0;
var g_year = 0;
var g_yLow = 1990;
var g_eC=null;
var g_eCV="";
var g_dFmt=GetDateFmt();
var g_fnCB=null;

var rgMC = new Array(12);
rgMC[0] = 31;rgMC[1] = 28;rgMC[2] = 31;rgMC[3] = 30;rgMC[4] = 31;rgMC[5] = 30;rgMC[6] = 31;rgMC[7] = 31;rgMC[8] = 30;rgMC[9] = 31;rgMC[10] = 30;rgMC[11] = 31;

d = new Date();
fTSR=0;
zv = d.getTime();
zz = "&zz="+zv;

function GetDowStart() {return 0;}
function GetDateFmt() {return "mmddyy";}
function GetDateSep() {return "/";}

function GetInputDate(t,f){
var l = t.length;
if(0 == l) return false;
var cSp = '\0';
var sSp1 = "";
var sSp2 = "";
for(var i = 0; i < t.length; i++){
var c = t.charAt(i);
if(c == ' ' || isdigit(c)) continue;
else if(cSp == '\0' && (c == '/' || c == '-' || c == '.')){
cSp = c;
sSp1 = t.substring(i+1,l);
}
else if(c == cSp) sSp2 = t.substring(i+1,l);
else if(c != cSp) return false;
}
if(0 == sSp1.length) return false;
var m;
var d;
var y;
if(f=="mmddyy"){
m = atoi(t);
d = atoi(sSp1);
if(0 != sSp2.length) y = atoi(sSp2);
else y = DefYr(m,d);
}
else if(f=="ddmmyy"){
m = atoi(sSp1);
d = atoi(t);
if(0 != sSp2.length) y = atoi(sSp2);
else y = DefYr(m,d);
}
else{
if(0 == sSp2.length) return false;
m = atoi(sSp1);
d = atoi(sSp2);
y = atoi(t);
}
if(y < 100){
y = 1900+y;
while(y < g_yLow) y = y+100;
}
if(y < g_MINY || y > g_MAXY || m < 1 || m > 12) return false;
if(d < 1 || d > GetMonthCount(m,y)) return false;
g_month = m;
g_day = d;
g_year = y;
return true;
}

function DefYr(m,d){
var dt = new Date();
var yCur = (dt.getYear() < 1000) ? 1900+dt.getYear() : dt.getYear();
if(m-1 < dt.getMonth() || (m-1 == dt.getMonth() && d < dt.getDate())) return 1+yCur;
else return yCur;
}

function atoi(s){
var t = 0;
for(var i = 0; i < s.length; i++){
var c = s.charAt(i);
if(!isdigit(c)) return t;
else t = t*10 + (c-'0');
}
return t;
}

function isdigit(c) {return(c >= '0' && c <= '9');}
function GetMonthCount(m,y){
var c = rgMC[m-1];
if((2 == m) && IsLeapYear) c++;
return c;
}
function IsLeapYear{
if(0 == y % 4 && ((y % 100 != 0) || (y % 400 == 0))) return true;
else return false;
}

function ShowCalendar(eP,eD,eDP,dmin,dmax,fnCB){
var dF=document.all.CalFrame;
var wF=window.frames.CalFrame;

if(null==wF.g_fCalLoaded || false==wF.g_fCalLoaded){
alert("Unable to load popup calendar.\r\nPlease reload the page.");
return;
}

wF.SetMinMax(new Date(dmin),new Date(dmax));
g_fnCB=fnCB;

if(eD==g_eC && "block"==dF.style.display){
if(g_eCV != eD.value && GetInputDate(eD.value,g_dFmt)){
wF.SetInputDate(g_day,g_month,g_year);
wF.SetDate(g_day,g_month,g_year);
g_eCV=eD.value;
}
else
dF.style.display="none";
}
else{
if(GetInputDate(eD.value,g_dFmt)){
wF.SetInputDate(g_day,g_month,g_year);
wF.SetDate(g_day,g_month,g_year);
}
else if(null != eDP && GetInputDate(eDP.value,g_dFmt)){
wF.SetInputDate(g_day,g_month,g_year);
wF.SetDate(g_day,g_month,g_year);
}
else{
var dt=new Date(dmin);
wF.SetInputDate(-1,-1,-1);
wF.SetDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear());
}
var eL=0;var eT=0;
for(var p=eP; p&&p.tagName!='BODY'; p=p.offsetParent){
eL+=p.offsetLeft;
eT+=p.offsetTop;
}
var eH=eP.offsetHeight;
var dH=dF.style.pixelHeight;
var sT=document.body.scrollTop;
dF.style.left=eL;
if(eT-dH >= sT && eT+eH+dH > document.body.clientHeight+sT)
dF.style.top=eT-dH;
else
dF.style.top=eT+eH;
if("none"==dF.style.display)
dF.style.display="block";
g_eC=eD;
g_eCV=eD.value;
}
}

function SetDate(d,m,y){
var ds=GetDateSep();
g_eC.focus();
if("mmddyy"==g_dFmt) g_eC.value=m+ds+d+ds+y;
else if("ddmmyy"==g_dFmt) g_eC.value=d+ds+m+ds+y;
else g_eC.value=y+ds+m+ds+d;
g_eCV=g_eC.value;
if(null != g_fnCB && "" != g_fnCB)
eval(g_fnCB);
}

function GetDOW2(d,m,y){
var dt=new Date(y,m-1,d);
return(dt.getDay()+(7-GetDowStart()))%7;
}

function LoadMonths{
var dt=new Date();
var m=dt.getMonth()+1;
var y=dt.getFullYear();
var rg=new Array;
for(i=0; i < n; i++){
rg=document.createElement("IMG");
rg.src="/eta/months/w" + GetDOW2(1,m,y) + "d" + GetMonthCount(m,y) + ".gif";
m++;
if(12 < m){
m=1;
y++;
}
}
}

LoadMonths(12);


***********************************************************


calendar.htm

<HTML><HEAD><TITLE>Date Picker</TITLE>
<STYLE>
<!--
.hdr {background:gray;color:#FFFFFF;border-width:1px;border-color:black;border-style:solid}
.hdrA {background:gray;color:#FFFFFF;border-width:1px;border-color:black;border-style:solid;cursor:hand;}
.ndt {position:absolute;width:19;height:19;}
.bdt {position:absolute;width:19;height:19;}
.dt {position:absolute;width:19;height:19;cursor:hand;}
.sdt {position:absolute;width:19;height:19;}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#990000 VLINK=#990000 ALINK=#990000 onLoad="DoLoad()">
<BASEFONT FACE="Arial,Helvetica,Geneva,Swiss,Sans Serif">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 style="border-width:2px;border-color:black;border-style:solid;font:8pt arial;background:white;">
<TR><TD HEIGHT=20>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 HEIGHT=20 style="font: 8pt arial;"><TR>
<TD WIDTH=16 ID=PrevDiv CLASS="hdrA"><IMG ID=Prev SRC="prev.gif" onClick="PC();" ALT="Show Previous Month" width="16" height="16"></TD>
<TD WIDTH=101 ALIGN=MIDDLE CLASS="hdr"><SPAN ID=MonthTitle></SPAN>&nbsp;&nbsp;<SPAN ID=YearTitle></SPAN></TD>
<TD WIDTH=16 ID=NextDiv CLASS="hdrA"><IMG ID=Next SRC="next.gif" onClick="NC();" ALT="Show Next Month" width="16" height="16"></TD>
</TR></TABLE>
</TD></TR>
<TR><TD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD><IMG ID=WeekImg SRC="week0.gif" width="141" height="20"></TD></TR>
<TR><TD HEIGHT=1 BGCOLOR=#000000></TD></TR>
<TR>
<TD ALIGN=MIDDLE STYLE="position:relative;"> <IMG ID="SelDate" CLASS="sdt" STYLE="display:none;" SRC="seldate.gif" width="19" height="19">
<IMG ID=MonthImg SRC="blank.gif" STYLE="position:relative;left:0;top:0;" width="141" height="121">
<DIV ID=BKIMG1> <IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19"><IMG SRC="date.gif" width="19" height="19">
</DIV>
<IMG ID="Today" CLASS="ndt" STYLE="display:none;" SRC="ring.gif" onClick="TC()" width="19" height="19">
</TD>
</TR>
<TR><TD HEIGHT=1 BGCOLOR=#000000></TD></TR>
</TABLE>
</TD></TR>
<TR><TD HEIGHT=20 ALIGN=MIDDLE><A STYLE="color: #336699" HREF="javascript:CC()">Cancel</A></TD></TR>
</TABLE>

<SCRIPT>
<!--
var g_fCalLoaded=false;
var da=document.all;
var wp=window.parent;
var cf=wp.document.all.CalFrame;
var bdc=da.BKIMG1.children;
var dMin;var dMax;
var XOff=2;var YOff=1;
var XSize=20;var YSize=20;
var g_dC=-1;var g_mC=-1;var g_yC=-1;
var g_dI=-1;var g_mI=-1;var g_yI=-1;

function DoLoad()
{
for(i=0;i<7;i++)
{
for(j=0;j<6;j++)
{
var t=j*7+i;
bdc[t].day=t+1;
bdc[t].onclick=BC;
bdc[t].className="dt";
bdc[t].style.left=da.MonthImg.offsetLeft+XOff+XSize*i-1;
bdc[t].style.top=da.MonthImg.offsetTop+YOff+YSize*j;
}
}
}

function TC()
{
if(event.srcElement.className=="dt")
{
var dt=new Date();
wp.SetDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear());
cf.style.display="none";
}
event.cancelBubble = true;
}

function BC()
{
if(event.srcElement.className=="dt")
{
var iDay = event.srcElement.day;
iDay-=GetDOW(1,g_mC,g_yC);
wp.SetDate(iDay,g_mC,g_yC);
cf.style.display="none";
}
event.cancelBubble=true;
}

function CC() {cf.style.display="none";}

function NC()
{
if(g_mC==12) SetDate(g_dC,1,g_yC+1);
else SetDate(g_dC,g_mC+1,g_yC);
}

function PC()
{
if(g_mC==1) SetDate(g_dC,12,g_yC-1);
else SetDate(g_dC,g_mC-1,g_yC);
}

function SetInputDate(day,month,year) {g_dI = day;g_mI = month;g_yI = year;}

function FmtTitle(str)
{
var r=str.charAt(0);
for(i=1;i<str.length;i++) r=r+"&nbsp;"+str.charAt(i);
return r;
}

function SetMinMax(min,max) {dMin=min;dMax=max;}

function SetDate(day, month, year)
{
da.WeekImg.src="week"+wp.GetDowStart()+".gif";
da.MonthImg.src="w"+GetDOW(1,month,year)+"d"+GetMonthCount(month,year)+".gif";
da.MonthTitle.innerHTML=FmtTitle(rgMN[month-1]);
da.YearTitle.innerHTML=FmtTitle(year.toString());
var dt=new Date();
var s,n,v,d;

d="none";
if(month==dt.getMonth()+1&&year==dt.getFullYear())
{
iBox=dt.getDate()+GetDOW(1,dt.getMonth()+1,dt.getFullYear())-1;
if(ValidDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear())) n="dt";
else n="bdt";
da.Today.className=n;

da.Today.style.left=bdc[iBox].style.left;
da.Today.style.top=bdc[iBox].style.top;
d="block";
}
da.Today.style.display=d;

d="none";
if(-1!=g_dI&&month==g_mI&&year==g_yI)
{
iBox=g_dI+GetDOW(1,g_mI,g_yI)-1;
da.SelDate.style.left=bdc[iBox].style.left;
da.SelDate.style.top=bdc[iBox].style.top;
d="block";
}
da.SelDate.style.display=d;

if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<=(dMin.getMonth()+1)) ) {n="hdr";v="hidden";}
else {n="hdrA";v="visible";}
da.PrevDiv.className=n;
da.Prev.style.visibility=v;

if( year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>=(dMax.getMonth()+1)) ) {n="hdr";v="hidden";}
else {n="hdrA";v="visible";}
da.NextDiv.className=n;
da.Next.style.visibility=v;

var i=0;
var iMin=GetDOW(1,month,year);
var iMax=GetMonthCount(month,year)+GetDOW(1,month,year);

for(;i<iMin;i++) {bdc.src="nodate.gif";bdc.className="ndt";}
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<(dMin.getMonth()+1)) || year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>(dMax.getMonth()+1)) )
{
for(;i>iMax;i++) {bdc.src="baddate.gif";bdc.className="bdt";}
}
else if(month==(dMin.getMonth()+1))
{
iBox=dMin.getDate()+GetDOW(1,dMin.getMonth()+1,dMin.getFullYear())-1;
for(;i<iMax;i++)
{
if(i<iBox) {s="baddate.gif";n="bdt";}
else {s="date.gif";n="dt";}
bdc.src=s;bdc.className=n;
}
}
else if(month==(dMax.getMonth()+1))
{
iBox=dMax.getDate()+GetDOW(1,dMax.getMonth()+1,dMax.getFullYear())-1;
for(;i<iMax;i++)
{
if(i<iBox+1) {s="date.gif";n="dt";}
else {s="baddate.gif";n="bdt";}
bdc.src=s;bdc.className=n;
}
}
else
{
for(;i<iMax;i++) {bdc.src="date.gif";bdc.className="dt";}
}
for(;i<42;i++) {bdc.src="nodate.gif";bdc.className="ndt";}

g_dC=day;
g_mC=month;
g_yC=year;
}

function ValidDate(day,month,year)
{
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<(dMin.getMonth()+1)) || (year==dMin.getFullYear()&&month==(dMin.getMonth()+1)&&day<dMin.getDate()) ) return false;
else if( year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>(dMax.getMonth()+1)) || (year==dMax.getFullYear()&&month==(dMax.getMonth()+1)&&day>dMax.getDate()) ) return false;
else return true;
}

function GetMonthCount(month,year)
{
var c=rgMC[month-1];
if((2==month)&&IsLeapYear(year)) c++;
return c;
}

function IsLeapYear(year) {return( 0==year%4 && ((year%100!=0)||(year%400==0)) );}

function GetDOW(day,month,year)
{
var dt=new Date(year,month-1,day);
return (dt.getDay()+(7-wp.GetDowStart()))%7;
}

var rgMN=new Array(12);
rgMN[0]="JAN";
rgMN[1]="FEB";
rgMN[2]="MAR";
rgMN[3]="APR";
rgMN[4]="MAY";
rgMN[5]="JUN";
rgMN[6]="JUL";
rgMN[7]="AUG";
rgMN[8]="SEP";
rgMN[9]="OCT";
rgMN[10]="NOV";
rgMN[11]="DEC";

var rgMC=new Array(12);
rgMC[0]=31;
rgMC[1]=28;
rgMC[2]=31;
rgMC[3]=30;
rgMC[4]=31;
rgMC[5]=30;
rgMC[6]=31;
rgMC[7]=31;
rgMC[8]=30;
rgMC[9]=31;
rgMC[10]=30;
rgMC[11]=31;

g_fCalLoaded=true;
//-->
</SCRIPT>

</BODY>
</HTML>


********************************************************

mypage.html

In the head section:

<!-- Popup Calendar Stuff -->
<IFRAME STYLE="display:none;position:absolute;width:148;height:194;z-index=100" ID="CalFrame" MARGINHEIGHT=0 MARGINWIDTH=0 NORESIZE FRAMEBORDER=0 SCROLLING=NO SRC="cal/calendar.htm"></IFRAME>
<SCRIPT LANGUAGE="javascript" SRC="cal/calendar.js"></SCRIPT>
<SCRIPT FOR=document EVENT="onclick()">
<!--
document.all.CalFrame.style.display="none";
//-->
</SCRIPT>
<!-- END Popup Calendar Stuff -->



In the body section:

<input name="Date" type="text" size="18" maxlength="6"><a href="javascript:ShowCalendar(document.myform.dateimg1,document.myform.Date,null, '<%= FormatDateTime(DateAdd("yyyy", 0, now()),2)%>', '<%= FormatDateTime(DateAdd("yyyy", 1, now()),2)%>')" onClick=event.cancelBubble=true;><img align=top border=0 height=21 id=dateimg1 src="cal/calendar.gif" style="POSITION: relative" width=34></a>

 

[vbkris]

can i also have the mypage.asp code fully??? the code u have given is insufficient...

Known is handfull, Unknown is worldfull

 

[Lambro]

<html>
<head>
<!-- Popup Calendar Stuff -->
<IFRAME STYLE="display:none;position:absolute;width:148;height:194;z-index=100" ID="CalFrame" MARGINHEIGHT=0 MARGINWIDTH=0 NORESIZE FRAMEBORDER=0 SCROLLING=NO SRC="cal/calendar.htm"></IFRAME>
<SCRIPT LANGUAGE="javascript" SRC="cal/calendar.js"></SCRIPT>
<SCRIPT FOR=document EVENT="onclick()">
<!--
document.all.CalFrame.style.display="none";
//-->
</SCRIPT>
<!-- END Popup Calendar Stuff -->
</head>


<body>
<form action="confirm.asp" method="post" name="myform">
<input name="Date" type="text" size="18" maxlength="6"><a href="javascript:ShowCalendar(document.myform.dateimg1,document.myform.Date,null, '<%= FormatDateTime(DateAdd("yyyy", 0, now()),2)%>', '<%= FormatDateTime(DateAdd("yyyy", 1, now()),2)%>')" onClick=event.cancelBubble=true;><img align=top border=0 height=21 id=dateimg1 src="cal/calendar.gif" style="POSITION: relative" width=34></a>br>
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>



Also earlier I mentioned that I want the final output to be YYMMDD, I want it to be MMDDYY