Validating sn-date-picker control in widgets

[ragz]

Hi All ,

I am using two date picker control in  Widget . I need to validate both controls

Start date is greater than equal to Today

Enddate is greater than equal than equal to start Date .

<sp-date-picker id="startDate" ng-model="startDate" sn-change="validation()"></sp-date-picker>

<sp-date-picker id="endDate" ng-model="endDate" ></sp-date-picker>

How to achieve this ? 

[Ji__ Vopolka · Accepted solution]

Hello,

With the ng-model directive you are saving tour dates to: $scope.startDate and $scope.endDate, so inject $scope service to your client script:

function($scope) {
	/* widget controller */
	var c = this;
}

Next you need to create a function for dates comparison, simple as that:

function($scope) {
	/* widget controller */
	var c = this;
	
	$scope.compareDates = function() {
		var firstDate = new Date($scope.startDate);
		var secondDate = new Date($scope.endDate);

		return firstDate > secondDate;
	};
}

Next you want to compare if startDate OR endDate change, for that you can use angular watcher:

function($scope) {
	/* widget controller */
	var c = this;
	
	$scope.compareDates = function() {
		var firstDate = new Date($scope.startDate);
		var secondDate = new Date($scope.endDate);

		return firstDate > secondDate;
	};
	
	$scope.$watchGroup(['startDate', 'startDate'], function(newValues, oldValues, scope) {
		// newValues array contains the current values of the watch expressions
		// with the indexes matching those of the watchExpression array
		// i.e.
		// newValues[0] -> $scope.startDate
		// and 
		// newValues[1] -> $scope.startDate
		
		var comparisonResult = $scope.compareDates();
		
		if (!comparisonResult) {
			// Do whatever you want, you can for example reset startDate and endDate back to oldValues or clear them completely, alert user etc...
		}
	});
}

Hope it helps 🙂