Date and Time

<< Click to Display Table of Contents >>

Navigation:  Snippets >

Date and Time

Previous pageReturn to chapter overviewNext page

 

Add a Pane to the Canvas called header, set the background colour

 

Add a label to the pane called timelabel, set colour so it shows on the Pane above.

 

Create a function ( numbers for explanation only)

 

1           _displayDate:function(){

2                ns=this;

3               var date = xui.Date,d = new Date();

4                month = ["January","February","March","April","May","June","July","August","September","October","November","December"];

5                days  = ["-","st","nd","rd","th","th","th","th","th","th","th","th","th","th","th","th","th","th","th","th","th","st","nd","rd","th","th","th","th","th","th","th","st"];

6                weekdays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

7                monthtext = month[date.get(d,'m')];

8                dayextra = days[date.get(d,'d') ];

9                weekdaytext = weekdays[date.get(d,"w")];

10                if ( date.get(d,'d') < 10) {datetext = "0" + date.get(d,'d');   } else {datetext = date.get(d,'d'); }

11               if ( date.get(d,'h') < 10) {hourstext = "0" + date.get(d,'h');   } else {hourstext = date.get(d,'h'); }

12                if ( date.get(d,'n') < 10) {minutestext = "0" + date.get(d,'n');   } else {minutestext = date.get(d,'n'); }

13               ns.timelabel.setCaption(weekdaytext+" "+datetext+dayextra +" "  + monthtext +" "+ date.get(d,'y')  +"  -  "+  hourstext +":" + minutestext );

               },

 

1

Function name _displayDate

2

Set scope

3

Get the date

4

Set array for months

5

Set array for date abbreviation i.e. 1st, 2nd

6

Set array for the weekdays

7

Set variable monthtext to a textual type based on integer returned ( look in the API fordetails on date.get() )

8

Set variable dayextra to a textual type based on integer returned

9

Set variable weekdaytext to a textual type based on integer returned

10

Add a zero (0) to values of 0-9 this will keep the display length consistent

11

Add a zero (0) to values of 0-9 this will keep the display length consistent

12

Add a zero (0) to values of 0-9 this will keep the display length consistent

13

Display the details in the Label - timelable

 

Set up a timer to refresh the display (somewhere in the onready probably

 

               setInterval(function () {  ns._displayDate();   }, 30000);

 

There are many ways to do the arrays and convert days, hours, minutes etc. Search for Javascript time and date to see other (maybe better) ways to do this.