I've noticed several posts on the board expressing angst over using JavaScript dates in web components. The people on this board have helped me quite a bit over the years and I like to give back when I can. Below I�m going to outline some methods and properties that are very helpful with dealing with the issue of converting control data to and from JavaScript dates.
Since JavaScript uses a zero based month, 0 being January, and a date format that a lot of world doesn�t use, it can be a real pain to work with dates that are entered in a component in another format. For instance, most of the world uses a dd/MM/yyyy format while the United States and JavaScript use MM/dd/yyyy. (JavaScript does accept some other formats as well but that isn�t the purpose of this discussion.) If you want to create a JavaScript date object using a standard A5 .getValue() method you're left with finding a way to reformat the string so that it can be passed into a JavaScript date constructor. Add into the mix the issue that the date field in the component can be formatted several other ways such as dd.mm.yy or yyyy/MM/dd and you really end up with a mess. To make it even more fun you can have a session variable that sets the formatting based on individual users so that now your code has to know what each user is using as their date format.
Fortunately for us, the Alpha team has already had to deal with the same issues and has provided some easy ways to get these values into a JavaScript date object. My goal here is to point you to the properties and methods that make this easy. A5 has added two handy methods to the "stock" JavaScript Date object. The first .fromFormat(date as string,format as string) will set a JavaScript date object to the date specified in the date sting using the format string to specify the actual format. The format string is the standard A5 date/time formatting that is used in the Xbasic TIME( [ Format_String as C [, Date_Time_Value as T ]] ) function. I�ll cover the second method later in this post.
For instance, if my control has a control with a date only date-picker, or a text control, with a date format of "dd/MM/yyyy" we can create a JavaScript date object very easily using code like this:
If you�re using a date/time picker your code might look like:
Pretty easy, isn't it? Now you might ask what if I'm using date-pickers for my controls and a session variable to set the date format so my international users all have their own formats. How can we find out the format dynamically? Again A5 has the solution. In the DOM on the user�s web browser A5 builds properties of the dialog or grid object that contain, among other things, the current format for date-picker fields. These properties are outlined below: (note the underscores where shown and note the field names must be in all caps)
To make the code above more universal, assuming we are using a date-picker, we can change it just a bit to use the actual format of the control, even though we may not know what it actually is.
Finally to round it all up you may want to return a JavaScript date object back as a formatted string. In this case we can use A5's other addition to the JavaScript date object .toFormat(format as string)
A complete JavaScript function for creating a JavaScript date object from a control and then returning a formatted date string back is shown below. It is used to set the low date for a date picker, in a second date picker control (end_date), to be one month more than the actual date set in the start_date control.
Once you have the dates in a JavaScript object then math operations are straight forward and there are lots of resources available on the internet, complete with examples .
I hope this has been of help in taking some of the mystery out of using JavaScript date objects with A5 web components.
Since JavaScript uses a zero based month, 0 being January, and a date format that a lot of world doesn�t use, it can be a real pain to work with dates that are entered in a component in another format. For instance, most of the world uses a dd/MM/yyyy format while the United States and JavaScript use MM/dd/yyyy. (JavaScript does accept some other formats as well but that isn�t the purpose of this discussion.) If you want to create a JavaScript date object using a standard A5 .getValue() method you're left with finding a way to reformat the string so that it can be passed into a JavaScript date constructor. Add into the mix the issue that the date field in the component can be formatted several other ways such as dd.mm.yy or yyyy/MM/dd and you really end up with a mess. To make it even more fun you can have a session variable that sets the formatting based on individual users so that now your code has to know what each user is using as their date format.
Fortunately for us, the Alpha team has already had to deal with the same issues and has provided some easy ways to get these values into a JavaScript date object. My goal here is to point you to the properties and methods that make this easy. A5 has added two handy methods to the "stock" JavaScript Date object. The first .fromFormat(date as string,format as string) will set a JavaScript date object to the date specified in the date sting using the format string to specify the actual format. The format string is the standard A5 date/time formatting that is used in the Xbasic TIME( [ Format_String as C [, Date_Time_Value as T ]] ) function. I�ll cover the second method later in this post.
For instance, if my control has a control with a date only date-picker, or a text control, with a date format of "dd/MM/yyyy" we can create a JavaScript date object very easily using code like this:
Code:
var dt = {dialog.object}.getValue('start_date'); //start_date is the name of the control in a UX with a date format of dd/MM/yyyy. Grids work the same way. var mydate = new Date(); //instantiate the date object mydate.fromFormat(dt,"dd/MM/yyyy"); //sets the mydate object to the value in the control
Code:
var dt = {dialog.object}.getValue('start_date'); //start_date is the name of the control in a UX that has been set up as a date-picker with a date/time format of dd/MM/yyyy 0h:0m am. var mydate = new Date(); //instantiate the date object mydate.fromFormat(dt,"dd/MM/yyyy 0h:0m am"); //sets the mydate object to the value in the control
Code:
{grid.object}._fieldHelpers_G.FIELD_NAME_IN_ALL_CAPS.dateTime.format -- (Grid) {grid.object}._fieldHelpers_DV.FIELD_NAME_IN_ALL_CAPS.dateTime.format -- (Detail View) {grid.object}._fieldHelpers_S.FIELD_NAME_IN_ALL_CAPS.dateTime.format -- (Search Part) {dialog.object}.fieldHelpers.FIELD_NAME_IN_ALL_CAPS.dateTime.format -- (works in repeating section as well)
Code:
var dt = {dialog.object}.getValue('start_date'); var mydate = new Date(); var unknownDateFormat = {dialog.object}.fieldHelpers.START_DATE.dateTime.format; //get the date/time format for this date picker. mydate.fromFormat(dt,unknownDateFormat);
A complete JavaScript function for creating a JavaScript date object from a control and then returning a formatted date string back is shown below. It is used to set the low date for a date picker, in a second date picker control (end_date), to be one month more than the actual date set in the start_date control.
Code:
function lowDate() {[INDENT]/* This function will compute the low date shown in the Date Picker. The function must return a date value (using the Date format that the Date Picker is set to use). */ var dt = {dialog.object}.getValue('start_date'); var dts = new Date(); var dtFormat = {dialog.object}.fieldHelpers.START_DATE.dateTime.format //use this to ensure the formatting is universal (field name must be all caps) dts.fromFormat(dt,dtFormat); dts.setMonth(dts.getMonth()+1); //set lowdate to start date plus one month minimum. return dts.toFormat(dtFormat); //use A5's toFormat() JavaScript addition to make the date formatting easier and to ensure we're sending back the same format as was received. [/INDENT] }
I hope this has been of help in taking some of the mystery out of using JavaScript date objects with A5 web components.
Comment