How to automatically set a property value to the current date/time with a Text Area JavaScript.

How to automatically set a property value to the current date/time with a Text Area JavaScript.

It is useful to have a property (document, data table, column) that is updated with the current date/time. One way this can be accomplished is by using JavaScript in a Text Area to update the property when the Text Area is referenced.
  Create the Text Area:

1. Select "Insert > Text Area" from the main menu.

Create the Input Field Property Control based on the Property:

1. Hover the cursor over the upper right-hand corner of the new Text Area, to display its four toolbar icons.
2. Hover the cursor over the pencil icon to display its tooltip ("Edit Text Area").
3. Left-click on the pencil icon to open the "Edit Text Area" window. 
4. In the "Edit Text Area" dialog's toolbar, hover the cursor over the second icon from the right to display its tooltip ("Insert Property Control").
5. In the "Edit Text Area" dialog, left-click this "Insert Property Control" button, then select "Input Field" from the drop-down menu to open the "Property Control" dialog.
6. On the "Property Control" dialog's "Document Properties" tab, left-click the "New" button. This will open the "New Property" dialog.
7. In the "New Property" dialog's "Property name" field, type (or paste) a name for the property (for example, "CurrentDateTimeProperty"). 
8. In the "New Property" dialog's "Data type" drop-down list, ensure that the "String" data type has been selected.
9. In the "New Property" dialog, left-click "OK".  This will close the "New Property" dialog.
10. On the "Property Control" dialog's "Document Properties" tab, note that the new property has been added to the list of properties.
11. In the "Property Control" dialog', left-click "OK" to complete the insertion of the Input Field Property Control.  This will also close the "Property Control" dialog.
12. In the upper left corner of the "Edit Text Area" dialog, note that an empty property control has been added. 
13. At the left-hand end of the "Edit Text Area" dialog's toolbar, hover the cursor over the diskette icon to display its tooltip ("Save")
14. Left-click on the "Edit Text Area" dialog's "Save" button.
15. Note that the new property appears in the upper left corner of the Text Area.
16. In the upper right corner of the "Edit Text Area" window, press the white-on-red [X] button to close the window. 

Wrap Input Field Property control in a div:

1. Right click on the Text Area and select "Edit HTML"
2. Find the Input Field property control:

   <SpotfireControl id="558f713f917a42c3b4bced0ef2950af0" />

3. Wrap the control in a div by inserting <div id="myInputField"> before, and </div> after the previous line (preferably on separate lines). This id will be the unique identifier used by the JavaScript to access the element. Like:

   <div id="myInputField">
   <SpotfireControl id="558f713f917a42c3b4bced0ef2950af0" /> 
   </div>

1. Right-click in the Text Area and select "Edit HTML" from the context-sensitive menu to open the "Edit HTML" dialog. 
2. On the "Edit HTML" dialog's toolbar, hover the cursor over the icon at the right-hand end of the toolbar to display its tooltip ("Insert JavaScript").
3. In the "Edit HTML" dialog, left-click the "Insert JavaScript" button to open the "Insert JavaScript" dialog.
4. In the "Insert JavaScript" dialog, left-click the "New" button to open the "New Script" dialog.
5. In the "New Script" dialog's "Script name" field, type (or paste) a name for the script  (for example, "setCurrentDateTimeProperty").
6. In the "New Script" dialog's "Script" field, paste the following JavaScript text:

   ////////////////////////////////////////////////////
   // Set an Input field value to the current date/time
   ////////////////////////////////////////////////////
   
   // Get Input field property control by its ID
   var elem = document.getElementById("myInputField");
   
   //Get currentdate
   var currentdate = new Date(); 
   
   //Format time parts to 2 digits
   currentHours = currentdate.getHours();
   currentHours = ("0" + currentHours).slice(-2);
   currentMinutes = currentdate.getMinutes();
   currentMinutes = ("0" + currentMinutes).slice(-2);
   currentSeconds = currentdate.getSeconds();
   currentSeconds = ("0" + currentSeconds).slice(-2);
   
   //Create final date time format
   var datetime = (currentdate.getMonth()+1) + "/"
                   + currentdate.getDate() + "/" 
                   + currentdate.getFullYear() + " "  
                   + currentHours + ":"  
                   + currentMinutes + ":" 
                   + currentSeconds;
   
   //Set the element value with the datetime
   $("#myInputField input").focus()
   $("#myInputField input").val(datetime).blur();

7. In the "New Script" dialog, click "OK" to close the dialog.
8. In the "Insert JavaScript" dialog, note that the new script has been added to the "Available scripts" field.
9. In the "Insert JavaScript" dialog's "Available scripts" field, left-click on the new script to highlight it. Note that this also enables the dialog's "OK" button. 
10. In the "Insert JavaScript" dialog, left-click on the "OK" button to complete the insertion of the JavaScript.  This will also close the "Insert JavaScript" dialog.
11. In the upper right corner of the "Edit HTML" window, press the white-on-red [X] button to close the window. 

//Set the element value with the datetime
$("#myInputField input").val(datetime).blur();

//Set the element value with the datetime
elem.childNodes[1].value = datetime;