Widget date picker - date validation on change

[TJ29]

I have a Delegate Approvals widget for the portal profile page but I'm having trouble getting some client side/dynamic date validation in. The below excerpts allow for validation upon submit. 

var from = new GlideDateTime();
var to = new GlideDateTime();
from.setDisplayValue(input.from);
to.setDisplayValue(input.to);
var gdt = new GlideDateTime();
var today = gdt.getDate();
______________________________________

if (gs.dateDiff(from, to, true) < 0) {
    gs.addErrorMessage("Please set to date to after from date.");
} else if (from < today) {
    gs.addErrorMessage("You have selected a date in the past");

I'd like to offer up something that works dynamically and/or prevent past dates being selected entirely but I can't wrap my head around how an onChange could work within the client script of the widget!

Thanks!

[ccajohnson]

Date and time calculations are performed server side. You will need to use an AJAX call in order to perform the check and have a result passed back to you to process client side. Let us know what you have so far and how what the expected results are so we can solution accordingly

[TJ29]

Hi @ccajohnson - thanks for following up so soon. 

I'm afraid I haven't got anything configured asides from the existing server side checks that run on submit. How could I retrieve the results of the server side check to present client side?

Thank you!

[ccajohnson]

I just realized that you are talking about a widget which has both client and server code within it. I would suggest troubleshooting the server code within scripts background so that you can verify that it works as expected. I am used to having client scripts trigger a function within a script include. Please explain further where the widget is built and how it is expected to function.

[TJ29]

Script works absolutely fine using the above logic but only applies upon submit so it allows the user to resume thinking all is fine. I just don't know how to make this happen dynamically. The widget is to allow end users to configure their delegates via the portal profile page. It's a date picker. 

I didn't write this widget, it has been inherited through my role!

CS for handling validation

c.changed = function() {
        c.data.value = $scope.user.value;
        c.data.displayValue = $scope.user.displayValue;
        c.data.delegatevalue = c.delegate.value;
        c.data.delegatedisplayValue = c.delegate.displayValue;
        c.data.from = c.from;
		c.data.to = c.to;
        c.data.approvals = c.approvals;
        c.data.assignments = c.assignments;
        c.data.notifications = c.notifications;
        c.data.meeting = c.meeting;
			
	        c.server.update().then(function() {
            if (c.data.verified == true) {
                window.location.reload();
            }
        })

    }

SS for validation

// Check if delegation is valid
	if (input && !action ){

		var from = new GlideDateTime();
		var to = new GlideDateTime();
		from.setDisplayValue(input.from);
		to.setDisplayValue(input.to);
		var gdt = new GlideDateTime();
		var today = gdt.getDate();

		if(!input.delegatevalue){
			gs.addErrorMessage("Please add delegate");
		} else if(!input.from || !input.to){
			gs.addErrorMessage("Please set dates");
		} else if(input.value == input.delegatevalue){
			gs.addErrorMessage("User and Delegate cant be the same");	
		} else if (gs.dateDiff(from, to, true) < 0) {
			gs.addErrorMessage("Please set to date to after from date.");
			} else if (from < today) {
			gs.addErrorMessage("You have selected a date in the past");
			} else if (!input.approvals &&	!input.assignments && !input.notifications && !input.meeting) {
			gs.addErrorMessage("Please select at least one thing to delegate.");
		} else {
			data.verified = true;
		}

	}