Angularjs Start Date And End Date Validations
I am completely New to Angularjs and trying to validate 2 scenarios. I have 2 text boxes one with start date and the other with end date. I am checking Show validation error on UI
Solution 1:
You have the logic reversed on the first bit and you have to construct a new date from startDate to compare to today's date. Also you set curDate to the scope, $scope.curDate = new Date()
but then you were referencing it as curDate
without the $scope
so it was undefined. Lastly, you need to cast stateDate
and endDate
to a date as well. Otherwise you're just comparing strings.
$scope.checkErr = function(startDate,endDate) {
$scope.errMessage = '';
var curDate = newDate();
if(newDate(startDate) > newDate(endDate)){
$scope.errMessage = 'End Date should be greater than start date';
returnfalse;
}
if(newDate(startDate) < curDate){
$scope.errMessage = 'Start date should not be before today.';
returnfalse;
}
};
Working example: http://jsfiddle.net/peceLm14/
Solution 2:
It looks like you're referencing curDate
which is undefined. Change the conditional to if (startDate < $scope.curDate)
. See fiddle for working example http://jsfiddle.net/4ec3atzk/1/
$scope.checkErr = function(startDate,endDate){
$scope.errMessage = '';
$scope.curDate = new Date();
if (startDate < endDate){
$scope.errMessage = 'End Date should be greate than start date';
returnfalse;
}
if (new Date(startDate) < $scope.curDate){
$scope.errMessage = 'Start date should not be before today.';
returnfalse;
}
};
Solution 3:
Check this link and it is explained clearly
Solution 4:
$scope.datepickerObjectfromdates = {
todayLabel: 'Today',
closeLabel: 'Close',
setLabel: 'Ok',
setButtonType : 'button-calm',
todayButtonType : 'button-calm',
closeButtonType : 'button-calm',
inputDate: new Date(),
mondayFirst: true,
templateType: 'popup',
showTodayButton: 'true',
modalHeaderColor: 'bar-calm',
modalFooterColor: 'bar-calm',
callback: function (val) {
var getdate = GetFormattedFromDates(val);
$scope.date.FromDates = getdate;
localStorage.date = $scope.FromDates;
},
dateFormat: 'MM-dd-yyyy', //Optional
closeOnSelect: false, //Optional
};
functionGetFormattedFromDates(val) {
if(typeof(val)==='undefined')
{
$scope.date.FromDates = '';
}
else {
var todayTime = new Date(val);
var month = todayTime.getMonth() + 1;
var day = todayTime.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
var year = todayTime.getFullYear();
return day + "/" + month + "/" + year;
}
}
$scope.datepickerObjecttodates = {
todayLabel: 'Today',
closeLabel: 'Close',
setLabel: 'Ok',
setButtonType : 'button-calm',
todayButtonType : 'button-calm',
closeButtonType : 'button-calm',
inputDate: new Date(),
mondayFirst: true,
templateType: 'popup',
allowOldDates: false,
showTodayButton: 'true',
modalHeaderColor: 'bar-calm',
modalFooterColor: 'bar-calm',
callback: function (val) {
var getdate = GetFormattedToDates(val);
$scope.date.ToDates = getdate;
//$scope.date.ToDates = getdate.clear();
},
dateFormat: 'dd-MM-yyyy', //Optional
closeOnSelect: false, //Optional
};
functionGetFormattedToDates(val) {
if (typeof(val) === 'undefined') {
$scope.ToDates = '';
}
else {
var todayTime = new Date(val);
var month = todayTime.getMonth() + 1;
var day = todayTime.getDate();
if (day < 10) {
day = '0' + day;
}
if (month < 10) {
month = '0' + month;
}
var year = todayTime.getFullYear();
return day + "/" + month + "/" + year;
}
}
Post a Comment for "Angularjs Start Date And End Date Validations"