Onchange client script for date validation

[shareef1]

Hi All,

I am trying to write an onChange client script to validate date fields. I have 4 date filed's like A-0, A-15, A-30, A-60.

These are populating automatically when the form is loading. but now i want to change one field that is A-0. Based on this remaining fields will calculate.

I mean when i change A-0 field,current date to another date i want to calculate reaming fields and populate the fields.

This is my requirement. can any one help me how to write a OnChange client script for this.

Regards,

Shareef.

[OlaN · Accepted solution]

Hi,

There are multiple ways to solve this, either you recalculate the other date directly in a client script.

Or you can use a GlideAjax and a Script include. If going for the second option you pass the start date into the function, do the calculations in the script include, and return an object with the recalculated dates to be used in the client script to set new values.

A simple client script can set new values as this:

var startDate = g_form.getValue('some_date_time_field');
var gwtDate = new GwtDate(startDate);
gwtDate.addSeconds(3600);  // this adds an hour to the starting date
g_form.setValue('some_other_field_name', gwtDate);  // set the recalculated date in another field

[AnubhavRitolia]

Hi @shareef1 

Can you please help with exact requirement of date calculation? Like what values you want to populate other 3 fields based on 1st date field?

[AnubhavRitolia · Accepted solution]

Hi @shareef1 

You can find the code below:

Client Script:

var ga = new GlideAjax('ABCDateUtils');  // or 'global.ABCDateUtils' if Script include is in Global scope and Client script is in Another scope
ga.addParam('sysparm_name', 'setGoLiveDate');
ga.addParam('sysparm_date', g_form.getValue('u_a_0')); // u_a_o is date field which may vary based the field name on your instance
ga.getXML(SetDate);
 
function SetDate(response) {
  var answer = response.responseXML.documentElement.getAttribute("answer");
 g_form.setValue('u_a_15',answer); // set value of other date field
.....
   }

Script Include: 

var ABCDateUtils = Class.create();
ABCDateUtils.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {

setGoLiveDate: function() {
var date = this.getParameter('sysparm_date'); 
var gdt = new GlideDateTime();
gdt.addDaysLocalTime(days);
return gdt.getLocalDate();
},
type: 'ABCDateUtils'
});

NOTE: If you are creating new Script include, prefer to creating in same application scope to avoid any access restriction issues/conflicts.

[Markus Kraus]

I highly discourage to use any of the methods presented in this thread so far, due to the following reasons:

• Unnecessary GlideAjax usage
• Undocumented GwtDate usage (which doesn't support custom date formats!)
• Only the ServiceNow default Date format is supported (yyyy-MM-dd)!
• Code will break if a user selects a custom date format, e.g. dd/MM/yyyy

The correct way of doing client-side Date-handling is as follows:

function onChange(control, oldValue, newValue, isLoading) {
	if (isLoading || newValue == '') {
		return;
	}

	var today = new Date();
	today.setUTCHours(0, 0, 0, 0);

	var timestamp = getDateFromFormat(g_form.getValue('my_field'), g_user_date_format);
	var date = new Date(timestamp);
	if (date < today) {
		alert('Date cannot be in the past!');
	}
}

The getDateFromFormat is also undocumented, but there are lots of resources to find on the community forum, and well established sources like servicenowguru etc.

For the other way (JavaScript-Date Object -> GlideForm Date):
https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0999278