Custom NowDateTime Form Field Icon for DateTime fields to fill current time as per users date time format

[subrahmanyam]

Hello Everyone,

I would like to share a way to create a button to be used beside "DateTime" fields, which can be used by users to pick current date time in users date time format.

Create a UI Macro with name "NowDateTimeIcon" with below code in XML field.

<?xml version="1.0" encoding="utf-8" ?>
<!-- Author : Subrahmanyam Satti -->
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<j:set var="jvar_ref" value="${ref}"/>
	<g:evaluate var="jvar_isActiveGlideDateTimeField">
		var tableUtil = new TableUtils('${ref_parent}');
		var isActiveDateTimeField = new GlideRecord("sys_dictionary");
		isActiveDateTimeField.addQuery("name", tableUtil.getTables());
		isActiveDateTimeField.addQuery("element", '${ref}'.split(".")[1]);
		isActiveDateTimeField.addQuery("internal_type", "glide_date_time");
		isActiveDateTimeField.addActiveQuery();
		isActiveDateTimeField.query();
		isActiveDateTimeField.hasNext();
	</g:evaluate>
	<j:set var="jvar_n" value="NowDateTimeIcon_${ref}"/>
	<j:if test="${jvar_isActiveGlideDateTimeField}">
                <!-- Free fontawesome icon library for commercial use -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
		<div>
	  		<button id="${jvar_n}" onclick="setNowDateTime('${ref}', this)" title="Set NowDateTime" alt="Set NowDateTime" tabindex="0" class="btn btn-default btn-ref fa fa-clock-o" style="font-size:1.28em" type="button">
    	  		<span class="sr-only">Now DateTime</span>
			</button>
		</div>
   		<script>
			function setNowDateTime(fieldReference, btnRef) {
				var fieldName = fieldReference.split(".")[1];
				function clearFieldMessages(){
					g_form.hideFieldMsg(fieldName);
					btnRef.enable();
				}
				btnRef.disable();
				if(g_form.getValue(fieldName) != ""){
					if(g_form.isDisabled(fieldName) == false){
						g_form.hideFieldMsg(fieldName);
						g_form.showFieldMsg(fieldName, "Clear existing value to set current DateTime", "error");
						setTimeout(clearFieldMessages, 2000);
					}
				}else{
					if(g_form.isDisabled(fieldName) == false){
						g_form.setValue(fieldName, new GwtDate().now().serializeInUserFormat());
						btnRef.enable();
					}
				}
			}  
		</script>
	</j:if>
</j:jelly>

Usage:
In the "DateTime" fields' dictionary record, add the attribute "ref_contributions=NowDateTimeIcon"
Icon only works in "DateTime" type fileds, for other type of fields icon won't show up.

Description:

Used to add a "Set NowDateTime" icon beside date-time fields.
The purpose of this button is to set the current date time in the adjacent date time field on form in user date time format as per the user's timezone.
If the field is disabled, then the button does nothing.
If there is an existing vale in field, then once you click system displays a field message "Clear existing value to set current DateTime" for a two seconds, to inform user to clear the value and click on this button to reset value to that point in time.
To prevent user from repeatedly clicking on button multiple times, the button is disabled till the time field message gets cleared.
Implemented this way to avoid changing field values with unintentional clicks of the button.

Here is how the button appears on screen.

Thanks and regards,

Subrahmanyam Satti