JS Calendar and date question 1

[RhythmAddict112]

Hi all. I'm not too familiar with JS and I've got a question that I think s
hould be easy for you JSers out there...

I am using a 3rd party javascript calendar and it is working great the probl
em is it starts with todays date when I load a page up. I need it to start
with yesterdays date however...

{
var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
'11', '12'];
var oForm = document.forms.sample;
if (oForm != null)
{
oForm.elements.s_yr.value = this.getYear();
oForm.elements.s_mo.value = aMonths[this.getMonth()];
oForm.elements.s_dt.value = this.getDate();
}
}


the oForm.elements.s_dt.value = this.getDate(); line is what is populating t
he day in the calendar I believe. The problem is I need to somehow subtract
a day from that. "THIS" in that line, is an object in a the .js file assoc
iated with the calendar I believe. (as i mentioned I don't know too much ab
out JS) How can I achive this? I can attach more code if necessary. Thank
you in advance.

 

[clarkin]

actually as I think the default unit is days, I believe it's as simple as amending the line to read:

 oForm.elements.s_dt.value = this.getDate()-1;

big, big in-depth reading here:

http://www.merlyn.demon.co.uk/js-date2.htm

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[RhythmAddict112]

Hmm.. Unfortunately, that is the first thing I tried & it didn't work :-/ I feel like we're just missing a small detail..any other ideas?

 

[LFI]

Rhythm,

You might try:

var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
var today = new Date();
var todayInMilliseconds = today.valueOf();
var oneDayInMilliseconds = 24 * 60 * 60 * 1000;

var yesterday = new Date(todayInMilliseconds - oneDayInMilliseconds);  

alert("Yesterday: " + aMonths[yesterday.getMonth()]+"/"+yesterday.getDate()+"/"+yesterday.getYear());

The line, today.valueOf() returns the millisecond equivalent of today's date. Subtracting one day of milliseconds (24 hours * 60 min/hr * 60 sec/min * 1000 ms/sec) puts you in yesterday. This millisecond value can then be used as the constructor of a new Date object.

'hope that helps.

--Dave

 

[RhythmAddict112]

hm well, i tried a bunch of stuff (including code posted above) but no to avail. however this is the entire chunk of code:

<script type="text/javascript" language="JavaScript1.2" src="acecalendar.js"></script>
<script type="text/javascript" language="JavaScript1.2">



oCal_2 = new AceCalendar();
oCal_2.setName("oCal_2");
oCal_2.setFont("Arial, Helvetica, sans-serif", "10pt");
oCal_2.setFormName("sample");
oCal_2.setFieldNames("end_yr", "end_mo", "end_dt" );
oCal_2.setStyle(0, "#0099FF", "#ffffff", "#666666", 0, 1);
oCal_2.setStyle(1, "#0033CC", "#FFFFFF", "#666666", 0, 1);
oCal_2.setStyle(2, "#000000", "#C8C8CC", "#000000", 0, 1);
oCal_2.setStyle(3, "#000000", "#C8C8C8", "#000000", 0, 1);
oCal_2.setStyle(4, "#666666", "#0000FF", "#FFFFFF", 0, 1);
oCal_2.display("", "","");

oCal_2.setAction	 = function()
{
	var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
	var today = new Date();
	var todayInMilliseconds = today.valueOf();
	var oneDayInMilliseconds = 24 * 60 * 60 * 1000;
	var yesterday = new Dt(todayInMilliseconds - oneDayInMilliseconds);  

	var oForm = document.forms.sample;
	if (oForm != null)
	{
		oForm.elements.s_yr.value = this.getYear();
		oForm.elements.s_mo.value = aMonths[this.getMonth()];
		oForm.elements.s_dt.value = this.getDate()+1;
	}
}
</script>

The line that reads

oCal_2.display("", "","");

Can statically have the date input. I.E., I could have that line read oCal_1.display("2003", "11", "31"); and it would always open to that day. If I can figure out a way to dynamically populate those fields with calculations of the previous day I think i'll be fine. I could easily to this with ASP but I can't mix the because it errors out. How can i do this with javascript?
As always thank you for your help!

 

[RhythmAddict112]

oops. sorry, ignore that chunk of code, this is the correct chunk of code (the above is me messing around!)

<script type="text/javascript" language="JavaScript1.2" src="acecalendar.js"></script>
<script type="text/javascript" language="JavaScript1.2">



oCal_2 = new AceCalendar();
oCal_2.setName("oCal_2");
oCal_2.setFont("Arial, Helvetica, sans-serif", "10pt");
oCal_2.setFormName("sample");
oCal_2.setFieldNames("end_yr", "end_mo", "end_dt" );
oCal_2.setStyle(0, "#0099FF", "#ffffff", "#666666", 0, 1);
oCal_2.setStyle(1, "#0033CC", "#FFFFFF", "#666666", 0, 1);
oCal_2.setStyle(2, "#000000", "#C8C8CC", "#000000", 0, 1);
oCal_2.setStyle(3, "#000000", "#C8C8C8", "#000000", 0, 1);
oCal_2.setStyle(4, "#666666", "#0000FF", "#FFFFFF", 0, 1);
oCal_2.display("", "","");

oCal_2.setAction	 = function()
{
	var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
 	var oForm = document.forms.sample;
	if (oForm != null)
	{
		oForm.elements.s_yr.value = this.getYear();
		oForm.elements.s_mo.value = aMonths[this.getMonth()];
		oForm.elements.s_dt.value = this.getDate()+1;
	}
}

 

[LFI]

What happens when you try it with the today and yesterday vars like in the code I suggested.

I looked at the code you accidentally posted (you called it "messing around") and that looked like an attempt to try out my suggestion. I see some errors in it. The declaration of yesterday calls for a new "Dt". That should be new Date.

Also, you still used this in the remainder of the code, when you should have tried:

if (oForm != null)
{
 oForm.elements.s_yr.value = [b]yesterday[/b].getYear();
 oForm.elements.s_mo.value = aMonths[[b]yesterday[/b].getMonth()];
 oForm.elements.s_dt.value = [b]yesterday.getDate()[/b];
}

What do you get when you try this?

--Dave

 

[RhythmAddict112]

Tryin that exactly as you typed I get a syntax error on 212, which is this line:

oCal_2.setStyle(4, "#666666", "#0000FF", "#FFFFFF", 0, 1);

Am I doing something wrong? My full code is attached:

<script type="text/javascript" language="JavaScript1.2" src="acecalendar.js"></script>
<script type="text/javascript" language="JavaScript1.2">



oCal_2 = new AceCalendar();
oCal_2.setName("oCal_2");
oCal_2.setFont("Arial, Helvetica, sans-serif", "10pt");
oCal_2.setFormName("sample");
oCal_2.setFieldNames("end_yr", "end_mo", "end_dt" );
oCal_2.setStyle(0, "#0099FF", "#ffffff", "#666666", 0, 1);
oCal_2.setStyle(1, "#0033CC", "#FFFFFF", "#666666", 0, 1);
oCal_2.setStyle(2, "#000000", "#C8C8CC", "#000000", 0, 1);
oCal_2.setStyle(3, "#000000", "#C8C8C8", "#000000", 0, 1);
oCal_2.setStyle(4, "#666666", "#0000FF", "#FFFFFF", 0, 1);
oCal_2.display("", "","");
	
	var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    var today = new Date();
    var todayInMilliseconds = today.valueOf();
    var oneDayInMilliseconds = 24 * 60 * 60 * 1000;
    var yesterday = new Date(todayInMilliseconds - oneDayInMilliseconds);  

    var oForm = document.forms.sample;
    if (oForm != null)
    {
		oForm.elements.s_yr.value = yesterday.getYear();
 		oForm.elements.s_mo.value = aMonths[yesterday.getMonth()];
 		oForm.elements.s_dt.value = yesterday.getDate();
    }
}


</script>

 

[clarkin]

oForm.elements.s_dt.value = this.getDate();

the this refers to the AceCalendar object you just created called oCal_2. I bet it has a method for setting the start date etc - have a look in acecalendar.js (you link to it).



Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[LFI]

That's peculiar that all the other setStyle commands work.

Perhaps the error is actually encountered INSIDE the setStyle function? Maybe one of the parameters you send causes an index-out-of-bounds error.

Does the error message say anything about what the error might BE? (syntax error, object expected, etc.)

Try commenting out the line and run again. What effect does that have?

--Dave

 

[RhythmAddict112]

hmm. this was missing from the code - must've gotten lost from the cutting/pastig.

oCal_2.setAction	 = function()
{
var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

When that is in, I do not get an error - however the date is still the current date.

This is def a method in the .js file and I can get the date to start a day behind the current date - the problem is when this happens the calendar doesn't select the day you click on, it selects the day previous to the day you click on.

 

[LFI]

Do you have another piece of code that is also trying to fills the s_yr, etc. elements? Maybe it's overriding the values you're entering.

Do you actually have a form named 'sample'?

Certainly, if you add this to your code:

alert(aMonths[yesterday.getMonth()]+"/"+yesterday.getDate()+"/"+yesterday.getYear());

...you will see that it shows yesterday's date.

--Dave

 

[RhythmAddict112]

I do have a form named sample and there is nothing (that I wrote) that is giving the calendar the date. I did try adding the above code to my page, however I did not get an alert box notifying me of the date. In fact I did not get an alert box at all :-/

 

[LFI]

Can you provide a link to the page for us to see?

--Dave

 

[RhythmAddict112]

Intranet :-/

 

[RhythmAddict112]

here is the link to the location of the calendar I am using (or tryin to, anyway)

http://www.programmersheaven.com/zone29/cat1043/30689.htm

 

[LFI]

All right... I've been putting off asking for this, but can you give me the whole HTML code of the page you're working on? From <HTML> to </HTML>.

--Dave

 

[RhythmAddict112]

okay..here goes..
Note: you're going to have to get the acecalendar.js file from the link I posted above for the calendar to work at all....

<%@ Language=VBScript %>
 
<%

 
	
  set CO = Server.CreateObject("ADODB.Connection")
  connstring = "<snip>"
				 
  
  CO.Open "<snip>connection string info"
				 
  
  If Request.Form = "" Then
%>

<html>
<HEAD>
 
<title>title</title>

 
<SCRIPT LANGUAGE="JavaScript">
 
function stringFilter (input) {
s = input.value;
filteredValues = "~`!@#$%^&*()_-+=|\}]{[:;<.,.\?/ ";     // Characters stripped out
var i;
var returnString = "";
for (i = 0; i < s.length; i++) {  // Search through string and append to unfiltered values to returnString.
var c = s.charAt(i);
if (filteredValues.indexOf(c) == -1) returnString += c;
}
input.value = returnString;
}
//  End -->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<BODY style="OVERFLOW: auto;  important" leftMargin=0 rightMargin=0
topMargin=0>
<br>
 
<!--form name has been added for JSCalendar Assoc.-->
<img src="images/spacer.gif" width="15" height="100" align="left" border="0" > 
<table width="400" border="0" cellspacing="2" cellpadding="8" bordercolor="#CCCC99">
<tr>
	<td>
	  
	</td>
</tr>
</table>
 

<table width="400" border="1" cellspacing="2" cellpadding="8" bordercolor="#CCCC99">


			 <form action="tool.asp" method="post" name="sample">
				<tr>
		   		 <td bgcolor="#DDDDDD">
				
		 
				</td>
    			<td align="left" bgcolor="#DDDDDD">
			 
				</td>
			</tr>
			<tr>
				<td>
 
Please select your search criteria:<br><br>
   <label>
    <input type="radio" name="group" value="id" checked>
          ID</label>
    <br>
    <label>
    <input type="radio" name="group" value="id2">
    ID 2</label>
    <br>
    <label>
    <input type="radio" name="group" value="id3">
          ID 3</label>
    <br><br><br><br>
	<input name="f_fielddata" type="text" id="text1" size="21">
				</td> 
				<td>
 				<table align="left" cellpadding="5" cellspacing="0" bordercolor="#DDDDDD"  BORDER=1 style="border-collapse: collapse">
          <tr>
						<td>
 

 
<script type="text/javascript" language="JavaScript1.2" src="acecalendar.js"></script>
<script type="text/javascript" language="JavaScript1.2">
oCal_2 = new AceCalendar();
oCal_2.setName("oCal_2");
oCal_2.setFont("Arial, Helvetica, sans-serif", "10pt");
oCal_2.setFormName("sample");
oCal_2.setFieldNames("end_yr", "end_mo", "end_dt" );
oCal_2.setStyle(0, "#0099FF", "#ffffff", "#666666", 0, 1);
oCal_2.setStyle(1, "#0033CC", "#FFFFFF", "#666666", 0, 1);
oCal_2.setStyle(2, "#000000", "#C8C8CC", "#000000", 0, 1);
oCal_2.setStyle(3, "#000000", "#C8C8C8", "#000000", 0, 1);
oCal_2.setStyle(4, "#666666", "#0000FF", "#FFFFFF", 0, 1);
oCal_2.display("", "", "");

oCal_2.setAction	 = function()
{
	var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
	var oForm = document.forms.sample;
	if (oForm != null)
	{
		oForm.elements.s_yr.value = this.getYear();
		oForm.elements.s_mo.value = aMonths[this.getMonth()];
		oForm.elements.s_dt.value = this.getDate();
	}
}
</script>

 </td>
	
					</tr>
			</table>
 
					<tr bgcolor="#DDDDDD">
			 
					<td>&nbsp;
					

					</td>
					<td>
					<input type="submit" value="Search" id="submit" name="submit" onClick="stringFilter(f_fielddata);">&nbsp;
					<input type="reset" value="Reset" id="reset1" name="reset1"></td>
				<tr>
		
 
	</tr>

	<input type="TEXT" name="s_dt" size="2">
	<input type="TEXT" name="s_mo" size="2">
	<input type="TEXT" name="s_yr" size="4"> 
				</form>


</table>



 
 
 
</body>
</html>

 

[LFI]

I should have asked for this a long time ago!

Put the today/yesterday code back in.

In the HTML BODY tag, add bold text:

<BODY style="OVERFLOW: auto;  important" leftMargin=0 rightMargin=0
topMargin=0 [b]onload='oCal_2.setAction()'[/b]>

...and that should do it.

'hope it works for you. It does for me in IE6.

--Dave

 

[RhythmAddict112]

okay. SO close. That absolutley does it for the text box, but I need that day to actually be chosen (as the textbox is going to be hidden) on the calendar...I'm not sure if you got that .js file, but basically it highlights the current day - so now for example the 30th is highlights while the 29th is in the textbox....