Using Javascript to display altered day/date

[Colday213]

Hi all,

I'm trying to get CP 5 to display the day and date but with an increment/decrement to the day/date

I've used google and managed to remedy the date issues, but I'm trying to get the day to change along with the date.

Below is the extra code in standard.js followed by the simple script I'm calling from CP.

Basically, I want the day to be outputted as a variable so I can insert it in a TC.

The bit at the end converts the date into a UK based format.

Cheers

---------------------------------------------------------------------------------------------------------------------------------------

standard.js addition

function date_math(increment,return_var){
var now = new Date();

now.setDate(now.getDate() + parseFloat(increment));
var nowStr =  (now.getDate() < 10 ? "0" + now.getDate().toString() : now.getDate().toString()) + "/" + (now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1).toString() : (now.getMonth()+1).toString()) + "/" + now.getFullYear().toString();
document.Captivate.cpEISetValue(return_var,nowStr);
}

CP5 script to create variables

date_math(-3,"d_m3");
date_math(-2,"d_m2");
date_math(-1,"d_m1");
date_math(0,"d0");
date_math(28,"d_p28");
date_math(15,"d_p15");

[Jim_Leichliter]

Hi Colday213,

As long as you have user variables already defined in your Cp project for d_m3, d_m2, d_m1 etc... you should be good to go.  Maybe I'm missing something?

Jim Leichliter

[Colday213]

I think I described it badly...

What I'm trying to do is get CP to produce a day and date that I am able to manipulate.

For instance I want it to display in the format Wednesday 08/06/2011 but...

I want to be able to change the date so that it takes todays date, and increments/decerements by a number set in the script.

The date-math function does that nicely and does exactly what I want, however this does not include the day.

So, I would like some help with incorporating some code in the standard.js to include a variable that displays the day as well as the date.

I'm creating a product that incorporates some days and dates on a form, and keeping it current engages the learner more.

I could put any old date in the boxes, but I want it to change to keep the product current.

Any help is very much appreciated

[Jim_Leichliter]

Are you displaying the date as MM/DD/YYYY or DD/MM/YYYY?  And when you say displaying the day, do you mean like "Monday, Tuesday, Wednesday..." etc. or do you mean like 01, 02, 03, ... 31 etc.?  In think this is a fantastic idea and I'd like to help you out...

Jim Leichliter

[Colday213]

Hi Jim,

Thanks for getting back to me.

I'm formatting the date as DD/MM/YYYY

I've got the variables in place so that I can increment/decrement the date using the date_math function.

But I also want to display the Day i.e. Monday, Tuesday etc etc which will also change with the increment/decrement.

The idea is that I have a form on the screen that says something like:-

Work opened:      Wednesday 08/06/2011

Work actioned:     Thursday  09/06/2011

Work completed:     Friday 10/06/2011

I can get the date bit sorted but cannot get the "day" part working.

Many thanks

[Jim_Leichliter]

Try this modified function:

function date_math(increment,return_var){ var now = new Date(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; now.setDate(now.getDate() + parseFloat(increment)); var nowStr =  (now.getDate() < 10 ? "0" + now.getDate().toString() : now.getDate().toString()) + "/" + (now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1).toString() : (now.getMonth()+1).toString()) + "/" + now.getFullYear().toString(); var myDate = new Date(nowStr); var strDate = weekday[myDate.getDay()].toString() + ' ' + nowStr; document.Captivate.cpEISetValue(return_var, strDate); }

You need to create an array of days then use the getDay() method to obtain the correct day of the week.  Also, when you concatenate strings, it's good practice to use single quotes.  Using double quotes (especially when concatenating spaces), can confuse the JS interpreter to try to use math when encountering the "+" sign and you'll get a NaN (Not a Number) error.

Let me know if that helps,

Jim Leichliter

[Colday213]

Hi Jim,

Thanks for your help but please excuse my ignorance, do I just copy and paste that into the standard.js file to replace my previous extra bits?

I've done that but when I try and preview the project (F12) I just get a blank screen.

What have I done?

Thanks

[Jim_Leichliter]

This is a replacement for your date_math function in your custom standard.js file.... so yes.. just a copy/paste.  Do you see any JS errors on the page? 

Also, you really shouldn't be putting your js code in the standard.js file since this is a Cp derived file.  I would create your own .js file and add a script include directive to your .htm page.  To see an example of including a .js file in your .htm, do a "view source" on the .htm page and look between the <head> tags and you'll see what Cp puts out to include the standard.js

script include directive in the .htm file for standard.js

<script src="standard.js" type="text/javascript"></script>

you could do something like this to include your own file:

<script src="myFunctions.js" type="text/javascript"></script>

where myFunctions.js would reside at the root of your project.. along with standard.js.

Jim Leichliter

[Colday213]

Right, somethings wrong somewhere.

This is what I've done so far.

I replaced my original additions to the standard.js with your new code, when I tried to preview the project I got a blank page. I used dreamweaver which showed no JS errors.

I then moved on to try your second suggestion of creating a second .js file.

I used the original addtion to the standard.js file (after //ing it out in the standard.js) and created epfunctions.js which I saved in the correct folder alongside the standard.js file.

I then edited the standard.htm file to include the epfunctions.js file. It looks like this:-

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>@MOVIETITLE</title>
<script src="standard.js" type="text/javascript"></script>

<!-- added for extra javascript function -->

<script src="epfunctions.js" type="text/javascript"></script>
</head>

Do I need to add anything extra into the htm file to get this working?

When I preview the page with the date_math call in the JS I just get a plain background slide. Nothing displays.

I'm confused.

If necessary I can share the three files with you on Acrobat? See what I've sodded about with?

Cheers

[Jim_Leichliter]

I'll take a look.  You can send them to jim AT CaptivateDev dot com. 

Thanks,

Jim

[Jim_Leichliter]

Col,

The Cp compiler is really sensitive to changes in the standard.htm publishing template... especially line breaks.  When you added the <script src="epfunctions.js" type="text/javascript"></script> line, I noticed that Cp stopped copying the standard.js file to the published directory.  So my previous advice is not going to work with Cp's quirky workflow. 

I'd say don't modify the standard.htm file publishing template (hopefully you backed it up).  Put your code in the standard.js file like you were doing... not the best practice, but given this odd behavior with Cp, it's probably the best way to go.

When you were viewing this in DW, I suspect that the standard.js and epfunctions.js files were not placed into the published directory... thus the blank screen.  Once they are there, the project should play and your functions should work as expected.

Let me know if that helps,

Jim Leichliter

[Colday213]

Hi again Jim.

Ok. I've got the javascript working using the code that you supplied.

So using my date_math call from captivate my dates work as they should.

Could you give me instructions on how to call the day from within CP please?

I currently use the following script in Captivate to call the variables d0, d_m3 (d minus 3) d_p28 (day plus 28) etc.

Then I insert the variables (d0, d_m3, d_p28) into text captions to display the manipulated dates.

date_math(-3,"d_m3");
date_math(-2,"d_m2");
date_math(-1,"d_m1");
date_math(0,"d0");
date_math(28,"d_p28");
date_math(15,"d_p15");

What variables need to be created and called in the CP script to get the day associated with the dates please?

I feel I'm not describing what I need very well. Sorry. Hope it's making sense?

Cheers

[Jim_Leichliter]

Hi Col,

So you want to retrieve the day associated with the date from within CP?  I'd do this with some more JS code:

Put this function in your standard.js

function getDayFromDate(cpRetVar, strDate){ var arrayDate = split(strDate, ' '); cpEISetValue(cpRetVar, arrayDate[0].toString()); }

Then call it from Cp like this:

getDayFromDate(YourTextCaptionVar, d_m1);

So the d_m1 contains the full string "Monday 01/23/2011".  In the getDayFromDate function, we pass in the Cp variable we want to use for displaying the day, and also we pass in the full date string "Monday 01/23/2011".  We then create an array using the split method which takes a string and splits it up into two parts based on the space ' '.  So the first element in the array would contain "Monday", and the second element in the array would contain "01/23/2011".  Arrays have a zero based index so the first element is accessed using arrayDate[0].  We then set the Cp variable as the first element in the array which should contain "Monday".

Let me know if that works...

Jim Leichliter

[Colday213]

Amazingly (for me) I can see how that should work...

I say should work becasue it doesn't seem to.

My epfunctions.js now looks like this (I've taken up your advice on using a seperate .js script as it is now working, I guess I hadn't pressed Save or something)

function date_math(increment,return_var){ 
var now = new Date();
 
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
 
now.setDate(now.getDate() + parseFloat(increment)); var nowStr =  (now.getDate() < 10 ? "0" + now.getDate().toString() : now.getDate().toString()) + "/" + (now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1).toString() : (now.getMonth()+1).toString()) + "/" + now.getFullYear().toString();
 
var myDate = new Date(nowStr);
var strDate = weekday[myDate.getDay()].toString() + ' ' + nowStr; 
document.Captivate.cpEISetValue(return_var, strDate); 
}
function getDayFromDate(cpRetVar, strDate){  
var arrayDate = split(strDate, ' ');  cpEISetValue(cpRetVar, arrayDate[0].toString());
}

and my call from Captivate look like:-

date_math(-3,"d_m3");
date_math(-2,"d_m2");
date_math(-1,"d_m1");
date_math(0,"d0");
date_math(28,"d_p28");
date_math(15,"d_p15");
getDayFromDate("day_m_1",d_m1);

I've added the variable day_m_1 to the variables list and inserted it in a text caption but when I preview F12 the project it just shows the date, not the day still.

I can't see why it doesn't work.

Maybe I'll try closing the various applications down and starting them up again.  A typical I.T. helpdesk advice type of thing 😉

I'll report back shortly.

[Jim_Leichliter]

Hi Col,

You may want to troubleshoot this by using alert() boxes:

date_math(-3,"d_m3"); date_math(-2,"d_m2"); date_math(-1,"d_m1"); date_math(0,"d0"); date_math(28,"d_p28"); date_math(15,"d_p15"); alert('d_m1: ' + d_m1); getDayFromDate("day_m_1",d_m1);

Make sure the value of d_m1 is getting set correctly before you call the next function.

Jim Leichliter

[Colday213]

Morning Jim.

I've been troubleshooting the issues I've been having today.

First. Can I confirm that if I replace my old bit of code

// Increase the value of the current date or decrement using a negative value.

function date_math(increment,return_var){
var now = new Date();

now.setDate(now.getDate() + parseFloat(increment));
var nowStr =  (now.getDate() < 10 ? "0" + now.getDate().toString() : now.getDate().toString()) + "/" + (now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1).toString() : (now.getMonth()+1).toString()) + "/" + now.getFullYear().toString();
document.Captivate.cpEISetValue(return_var,nowStr);
}

with your nice shiny new bit

function date_math(increment,return_var){ var now = new Date();

var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";

now.setDate(now.getDate() + parseFloat(increment)); var nowStr =  (now.getDate() < 10 ? "0" + now.getDate().toString() : now.getDate().toString()) + "/" + (now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1).toString() : (now.getMonth()+1).toString()) + "/" + now.getFullYear().toString();

var myDate = new Date(nowStr);
var strDate = weekday[myDate.getDay()].toString() + ' ' + nowStr; document.Captivate.cpEISetValue(return_var, strDate); }

and without making any changes to the CP project I should get the same results when I preview it? i.e. it will do the same job as the old code

Once you answer either way then I will be able to get to the second bit of troubleshooting.

Regards

Col.

[Colday213]

Ok.

With some more trial and error I've got your script working nicely.

The only issue is that it is reporting the day as one day early.

Today it is showing Thursday 10/06/2011 as today's date, which is a wee bit out.

What needs editing to get this fixed?

This seems to be doing this from your very first original script without the addition of the

function getDayFromDate(cpRetVar, strDate){ var arrayDate = split(strDate, ' '); cpEISetValue(cpRetVar, arrayDate[0].toString());

}

Then call it from Cp like this:

getDayFromDate(YourTextCaptionVar, d_m1);

When I add this and call it, nothing displays in the TC that I have given the variable to.

Any ideas?

I'm determined to get to the bottom of this!

I'm quite happy to share the .cptx file with you so you can see what I'm doing?

Thanks

[Jim_Leichliter]

Hi Col,

go ahead and post your most recent script and I will take a look at it with a fresh pair of eyes.

Thanks,

Jim Leichliter

[Colday213]

Right,

Hi Jim and anyone else who is interested.

With a little help (lot of help) from a friend (and he insists on a name mention, Ashley Greenslade) I currently have a working version of what I was trying to do in the first place.

function date_math(increment,return_var,return_var2){
var weekdays = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday");

var now = new Date();
var nowStr = new Date();
now.setDate(now.getDate() + parseFloat(increment));
var nowStr = (now.getDate() < 10 ? "0" + now.getDate().toString() : now.getDate().toString()) + "/" + (now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1).toString() : (now.getMonth()+1).toString()) + "/" + now.getFullYear().toString();

document.Captivate.cpEISetValue(return_var,nowStr);
document.Captivate.cpEISetValue(return_var2,weekdays[now.getDay()]);

}

This is the script I save in epfunctions.js which sits in the same folder as standard.js and the edited standard.htm which includes the line to call this script.

I then use:-

date_math(0,"d0", "day0");

to call it from Captivate after creating the "d0" and "day0" variables.

The first number "0" is the increment (or decrement) that you want to apply to the date.

So to create two variables for 1 week ahead I would create d_p7 (d_plus7) and day_p7 then call...

date_math(7,"d7", "day_p7");

Then pop the variables d_p7 and day_p7 into text captions to show the day and date in a weeks time.

I think Ash is working on getting the date to display in different variations i.e. 15 Jun 2011 or 15th June 2011 etc etc.

Thanks for all your help Jim.

Regards

[Jim_Leichliter]

Hi Col,

Glad it worked out and thank you for posting the solution!

Jim Leichliter