Date Format for System Date

Jan 15, 2013

Miriam de Jonge
By Miriam de Jonge

Hi there,

I followed the excellent advice and instructions from this thread for inserting a date into my Storyline

http://community.articulate.com/forums/p/12498/74794.aspx#74794 and I'm thrilled to say it's working just fine.

The date format is month/day/year but my course will be primarily used outside the US (where most countries record the date as day/month/year).  I manged to change the order of the string instruction so that my output is now day/month/year but I would ideally prefer if the date came out as the word instead of the number.  ie 15 January 2013 instead of either 1/15/13 or 15/1/13, as this would ensure the date was read properly globally.

I've tried searching the web for Javascript advice but I have no knowledge of JS and the advice is losing me completely!  Can anyone suggest adjustment to the JS code that is recommended in the above thread, which is:

var currentTime = new Date()
 var month = currentTime.getMonth() + 1
 var day = currentTime.getDate()
 var year = currentTime.getFullYear()
 var dateString=month + "/" + day + "/" + year
 var player = GetPlayer();
 player.SetVar("SystemDate",dateString);

23 Replies
Daniel Rosen
11 years ago03/14/13 at 8:17 am (UTC)

Hi Miriam,

While researching something for a colleague, I ran across your post. Here's the modified code that will allow you to display the date the way you want:

var currentTime = new Date();

var monthArray = new Array  ("January","February","March","April","May","June","July","August","September","October","November","December");

 var month = currentTime.getMonth();

 var theMonth = monthArray[month];

 var day = currentTime.getDate();

 var year = currentTime.getFullYear();

 var dateString= day + " " + theMonth + " " + year;

 var player = GetPlayer();
 player.SetVar("SystemDate",dateString);

Mike Wohlwend
11 years ago03/27/13 at 7:12 am (UTC)

Miriam Krajewski said:

var currentTime = new Date()
 var month = currentTime.getMonth() + 1
 var day = currentTime.getDate()
 var year = currentTime.getFullYear()
 var dateString=month + "/" + day + "/" + year
 var player = GetPlayer();
 player.SetVar("SystemDate",dateString);


Miriam, for future reference, the line with "var dateString" could probably have its later order shifted; looks like it is in this line that the order of month / day / year is established.

If this script worked before, changing that line to:

var dateString=day + "/" + month + "/" + year

should also display it ordered as you want to see it.

So the nice thing is, sometimes code can be as comprehensible as that!

OWEN HOLT
5 years ago03/06/19 at 7:30 pm (UTC)

Untested... but something like the following should get you the date string you are looking for.
var d = new Date();
var yyyy = d.getFullYear();
var month = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var currentMonth = month[d.getMonth()];
var dayNames = ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var weekDay = dayNames[d.getDay()];
var daySyntax = ['1st','2nd','3rd','4th','5th','6th','7th','8th','9th','10th','11th','12th','13th','14th','15th','16th','17th','18th','19th','20th','21st','22nd','23rd','24th','25th','26th','27th','28th','29th','30th','31st'];
var dd = daySyntax[d.getDate()-1];
var todaysDate = weekDay + ", " + currentMonth + " " + dd + ", " + yyyy
console.log(todaysDate);
GetPlayer().SetVar("Your Date Variable In StoryLine",todaysDate);

Katarina Klein
5 years ago03/06/19 at 9:25 pm (UTC)

Thank you for the quick reply!

After playing around with it for a bit, I was able to make it work how I needed by referencing %todaysDate% and executing the following JavaScript:

var d = new Date();
var yyyy = d.getFullYear();
var month = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var currentMonth = month[d.getMonth()];
var dayNames = ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var weekDay = dayNames[d.getDay()];
var daySyntax = ['1st','2nd','3rd','4th','5th','6th','7th','8th','9th','10th','11th','12th','13th','14th','15th','16th','17th','18th','19th','20th','21st','22nd','23rd','24th','25th','26th','27th','28th','29th','30th','31st'];
var dd = daySyntax[d.getDate()-1];
var todaysDate = weekDay + ", " + currentMonth + " " + dd + ", " + yyyy
console.log(todaysDate);
var dateString=weekDay + ", " + currentMonth + " " + dd + ", " + yyyy
var player = GetPlayer();
player.SetVar("todaysDate",dateString);

Colin Tudehope
almost 4 years ago05/07/20 at 1:22 am (UTC)

Thank you Miriam, Owen and Katarina. The above code has been a great help. 

If I am wanting to display a previous day & date (say 10 days ago) can I use the above code?

It seems to work fine if I modify the code to the below, if the date stays within the current month:

var weekDay = dayNames[d.getDay()-10];
var dd= [d.getDate()-10];

However if this changes the date to the previous month it does not work..
e.g. today is 'Thursday 7 May', -10 days I want the date to display as 'Tuesday 28 April'. Instead this displays as 'undefined -3 May'.

Can anyone suggest how to adjust Owen's/Katrina's code for this? Or do I need to use a js Calendar function instead? Thank you!

OWEN HOLT
almost 4 years ago05/07/20 at 1:25 pm (UTC)

You actually need to change the date in the date variable before you pull the other information.
To do this, add this line in the code right after you pull the current date:
d.setDate(d.getDate() - 10);

So your 1st three lines of code should now look like this:
var d = new Date();
d.setDate(d.getDate() - 10);
var yyyy = d.getFullYear();

Basically, setDate is a JavaScript date function that lets you choose the exact date you want to work with. In this case, we are saying we want the date that is today's date minus 10 days. Once we have that as our base date, all of the other date "get" functions are getting  the information from the date WE set.

OWEN HOLT
almost 4 years ago05/08/20 at 1:29 pm (UTC)

No problem.  Note that you can use that same logic to create a course license expiration.

  • Create a variable in StoryLine to hold a base date in mm/dd/yyyy format.
  • Use JavaScript to pull the SL variable and store it in a JS variable as a date object using the setDate function.
  • Pull the current date.
  • Do some math to calculate how many days have passed from the base date to the current.
  • Perform some action in SL based on the number of days that have passed.

    See an example here (.story file in the resources tab): LINK
Sharlene Steciuk
almost 4 years ago06/12/20 at 8:13 pm (UTC)

Thank you!!!  I am learning so much from everyone here and this is what I was able to gather from everyone here and resources elsewhere.

Javascript  - using a variable to call the current date and an expiration date 180 days later

Code 1 System Date

var currentTime = new Date()

var month = currentTime.getMonth() + 1

if(month<10);

{

 month='0' + month;

}

var day = currentTime.getDate()

var year = currentTime.getFullYear()

var dateString=month + "/" + day + "/" + year

var player = GetPlayer();

player.SetVar("SystemDate",dateString);

 

Code 2 Expire Date - 180 days later

var someDate = new Date();

var numberOfDaysToAdd = 180;

someDate.setDate(someDate.getDate() + numberOfDaysToAdd);

var dd = someDate.getDate();

var mm = someDate.getMonth() + 1;

var y = someDate.getFullYear();

var dateString = mm + "/" + dd + "/" + y;

var player = GetPlayer();

player.SetVar("ExpireDate",dateString);

 

Mario Taplin
over 3 years ago12/19/20 at 10:05 pm (UTC)

Hello all,

I'm in need of serious help with this. I have a certificate of completion that reads as follows:

On this 1st day of December, 2020, John Doe has been certified....

I know I have to use a separate JS code for the date, month, and year but I'm having trouble formatting everything. Can someone let me know the JS code for the date? Then the month, then the year? I tried using the code below but I need each one formatted separately. Any help will be greatly appreciated.

var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var dateString=month + "/" + day + "/" + year
var player = GetPlayer();
player.SetVar("SystemDate",dateString);

OWEN HOLT
over 3 years ago12/22/20 at 3:16 pm (UTC)

In JavaScript, "Date" is an object with lots of information in it but sometimes, you need to give it a little bit more information to get the format you want.

var month = currentTime.getMonth() + 1 returns a number from 1 to 12. Months are actually captured as 0 through 11 in the date object which is why the code has "+ 1" at the end. To change this to the actual month name, you need to create an array of month names and then pick the one you want based on the value in your month variable. Keep in mind, arrays are numbered starting at zero, so you can actually drop the "+ 1" from the code. In your code above, replace "var month = currentTime.getMonth() + 1" with the following. 

var month = currentTime.getMonth();
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var currentMonth = monthNames[month];

var day = currentTime.getDate() returns the actual date but as a number. Similar to the month names, you will need to create an array of days formatted how you want them to be displayed. Because this is the actual date, it will not align to the formatted dates in your array since the array starts at 0 and the 1st day of the month is "1".  To create the alignment, you will need to subtract one from your day. In your code above replace "var day = currentTime.getDate()" with the following: 

var day = currentTime.getDate(); 
var formatDay = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st"];
var todaysDate = formatDay[day-1];

You do not need to change the year but you will need to update your date string. Replace "var dateString=month + "/" + day + "/" + year" with the following:

var dateString = todaysDate + " day of " + currentMonth + ", " + year;

This will return something like "22nd day of December, 2020".

Sign In to Reply