Html code:
<form name="FrmMessageSearch" ng-submit="searchMessages()" novalidate="novalidate">
<input type="text" name="fromDate" validate-from-date="{{message.toDate}}" ng-model="message.fromDate" jqdatepicker/>
<span ng-show="FrmMessageSearch.fromDate.$error.enterFromDate && FrmMessageSearch.fromDate.$dirty">Select From Date</span>
<span ng-show="FrmMessageSearch.fromDate.$error.validateFromDateRequired && FrmMessageSearch.fromDate.$dirty">From Date Should be less than To Date</span>
<input type="text" name="toDate" validate-from-date="{{message.fromDate}}" ng-model="message.toDate" jqdatepicker/>
<span ng-show="FrmMessageSearch.toDate.$error.enterToDate && FrmMessageSearch.toDate.$dirty">Select To Date</span>
<span ng-show="FrmMessageSearch.toDate.$error.validateToDate && FrmMessageSearch.toDate.$dirty">To Date should be greater than From Date</span>
<button ng-disabled="(!FrmMessageSearch.$valid)" class="btn btn-primary" type="submit">
</form>
Js Code:
app.directive('validateToDate', function($log)
{
return {
restrict : 'A',
require : 'ngModel',
link : function(scope, element, attr, controller)
{
controller.$parsers.unshift(function(value)
{
var toDate = Date.parse(value);
var fromDate = Date.parse(attr.validateToDate);
var valid;
if (value == '' && fromDate != '')
{
controller.$setValidity('enterToDate', false);
valid = false;
}
else
{
valid = true;
controller.$setValidity('enterToDate', true);
if (fromDate <= toDate)
{
valid = true;
controller.$setValidity('validateToDate', true);
}
else
{
valid = false;
controller.$setValidity('validateToDate', false);
}
}
return valid ? value : undefined;
})
}
};
})
app.directive('validateFromDate', function($log)
{
return {
restrict : 'A',
require : 'ngModel',
link : function(scope, element, attr, controller)
{
controller.$parsers.unshift(function(value)
{
var toDate = Date.parse(attr.validateFromDate);
var fromDate = Date.parse(value);
var valid;
if (value == '' && toDate != '')
{
controller.$setValidity('enterFromDate', false);
valid = false;
}
if (fromDate <= toDate)
{
valid = true;
controller.$setValidity('validateFromDate', true);
}
else
{
valid = false;
controller.$setValidity('validateFromDate', false);
}
return valid ? value : undefined;
})
}
};
})
What I am trying to do here is: 1) either both dates should be selected or none 2) if only one date is selected other should prompt error saying please select date 3) from date should be greater that to date Can some one please help how can I get this done, any help is highly appreciated, thanks
Html code:
<form name="FrmMessageSearch" ng-submit="searchMessages()" novalidate="novalidate">
<input type="text" name="fromDate" validate-from-date="{{message.toDate}}" ng-model="message.fromDate" jqdatepicker/>
<span ng-show="FrmMessageSearch.fromDate.$error.enterFromDate && FrmMessageSearch.fromDate.$dirty">Select From Date</span>
<span ng-show="FrmMessageSearch.fromDate.$error.validateFromDateRequired && FrmMessageSearch.fromDate.$dirty">From Date Should be less than To Date</span>
<input type="text" name="toDate" validate-from-date="{{message.fromDate}}" ng-model="message.toDate" jqdatepicker/>
<span ng-show="FrmMessageSearch.toDate.$error.enterToDate && FrmMessageSearch.toDate.$dirty">Select To Date</span>
<span ng-show="FrmMessageSearch.toDate.$error.validateToDate && FrmMessageSearch.toDate.$dirty">To Date should be greater than From Date</span>
<button ng-disabled="(!FrmMessageSearch.$valid)" class="btn btn-primary" type="submit">
</form>
Js Code:
app.directive('validateToDate', function($log)
{
return {
restrict : 'A',
require : 'ngModel',
link : function(scope, element, attr, controller)
{
controller.$parsers.unshift(function(value)
{
var toDate = Date.parse(value);
var fromDate = Date.parse(attr.validateToDate);
var valid;
if (value == '' && fromDate != '')
{
controller.$setValidity('enterToDate', false);
valid = false;
}
else
{
valid = true;
controller.$setValidity('enterToDate', true);
if (fromDate <= toDate)
{
valid = true;
controller.$setValidity('validateToDate', true);
}
else
{
valid = false;
controller.$setValidity('validateToDate', false);
}
}
return valid ? value : undefined;
})
}
};
})
app.directive('validateFromDate', function($log)
{
return {
restrict : 'A',
require : 'ngModel',
link : function(scope, element, attr, controller)
{
controller.$parsers.unshift(function(value)
{
var toDate = Date.parse(attr.validateFromDate);
var fromDate = Date.parse(value);
var valid;
if (value == '' && toDate != '')
{
controller.$setValidity('enterFromDate', false);
valid = false;
}
if (fromDate <= toDate)
{
valid = true;
controller.$setValidity('validateFromDate', true);
}
else
{
valid = false;
controller.$setValidity('validateFromDate', false);
}
return valid ? value : undefined;
})
}
};
})
What I am trying to do here is: 1) either both dates should be selected or none 2) if only one date is selected other should prompt error saying please select date 3) from date should be greater that to date Can some one please help how can I get this done, any help is highly appreciated, thanks
Share Improve this question asked Dec 12, 2014 at 13:20 Mohan SethMohan Seth 7692 gold badges11 silver badges22 bronze badges2 Answers
Reset to default 2i have written directives for very similar purpose, I am using moment.js for date validations, but you can replace them with javascript Date object.
csapp.directive('isPastDate', function () {
var linkFn = function (scope, element, attrs, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
}, function () {
var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
var dateToCheck = moment(attrs.isPastDate).format('YYYY-MM-DD');
var result = moment(myDate).isBefore(dateToCheck);
ngModel.$setValidity("isPastDate", result);
});
attrs.$observe("isPastDate", function () {
var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
var dateToCheck = moment(attrs.isPastDate).format('YYYY-MM-DD');
var result = moment(myDate).isBefore(dateToCheck);
ngModel.$setValidity("isPastDate", result);
});
};
return {
require: 'ngModel',
link: linkFn
};
});
there are 2 parts to it, first one is if the start-date change and second one is if the end date change.
the start date needs to be validated in both cases.
csapp.directive('isFutureDate', function () {
var linkFn = function (scope, element, attrs, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
}, function () {
var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
var dateToCheck = moment(attrs.isFutureDate).format('YYYY-MM-DD');
var result = (moment(myDate).isAfter(dateToCheck));
ngModel.$setValidity("isFutureDate", result);
});
attrs.$observe("isFutureDate", function () {
var myDate = moment(ngModel.$modelValue).format('YYYY-MM-DD');
var dateToCheck = moment(attrs.isFutureDate).format('YYYY-MM-DD');
var result = (moment(myDate).isAfter(dateToCheck));
ngModel.$setValidity("isFutureDate", result);
});
};
return {
require: 'ngModel',
link: linkFn
};
});
Thanks for your help, but I found a solution to it, incase some one would need it. .
I basically made following changes to my directives. . .
app.directive('validateToDate', function($log)
{
return {
restrict : 'A',
link : function($scope, $element, $attr)
{
$scope.$watch('message.toDate', function()
{
var toDate = Date.parse($scope.message.toDate);
var fromDate = Date.parse($scope.message.fromDate);
console.log(toDate);
console.log(fromDate);
if ($scope.FrmMessageSearch.toDate.$dirty)
{
if (($scope.message.fromDate == '') && ($scope.message.toDate == ''))
{
$scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
$scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
}
else if (($scope.message.toDate == '') && ($scope.message.fromDate != ''))
{
$scope.FrmMessageSearch.toDate.$setValidity("enterToDate", false);
$scope.FrmMessageSearch.toDate.$setValidity("validateToDate", true);
$scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", true);
}
else if (($scope.message.toDate != '') && ($scope.message.fromDate == ''))
{
$scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", false);
}
else
{
$scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
$scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
if (toDate < fromDate)
{
$scope.FrmMessageSearch.toDate.$setValidity("validateToDate", false);
}
else
{
$scope.FrmMessageSearch.toDate.$setValidity("validateToDate", true);
}
}
}
})
}
};
})
app.directive('validateFromDate', function($log)
{
return {
restrict : 'A',
link : function($scope, $element, $attr)
{
$scope.$watch('message.fromDate', function()
{
var toDate = Date.parse($scope.message.toDate);
var fromDate = Date.parse($scope.message.fromDate);
console.log(toDate);
console.log(fromDate);
if ($scope.FrmMessageSearch.fromDate.$dirty)
{
$scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", true);
$scope.FrmMessageSearch.toDate.$setValidity("validateToDate", true);
if (($scope.message.fromDate == '') && ($scope.message.toDate == ''))
{
$scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
$scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
}
else if (($scope.message.fromDate == '') && ($scope.message.toDate != ''))
{
$scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", false);
}
else if ($scope.message.toDate == '')
{
$scope.FrmMessageSearch.toDate.$setValidity("enterToDate", false);
}
else if (($scope.message.fromDate == '') && ($scope.message.toDate == ''))
{
$scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
}
else
{
$scope.FrmMessageSearch.toDate.$setValidity("enterToDate", true);
$scope.FrmMessageSearch.fromDate.$setValidity("enterFromDate", true);
if (toDate < fromDate)
{
$scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", false);
}
else
{
$scope.FrmMessageSearch.fromDate.$setValidity("validateFromDate", true);
}
}
}
})
}
};
})