javascript angularjs 比较两个日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27444569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 07:29:58 来源:igfitidea点击:
angularjs comparing two dates
提问by Mohan Seth
Html code:
html代码：
<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:
JS代码：
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
我在这里尝试做的是：1）要么选择两个日期，要么不选择 2）如果只选择一个日期，其他应该提示错误，说请选择日期 3）从日期应该比迄今为止更大 可以有人帮忙吗我该如何完成这项工作，非常感谢任何帮助，谢谢
回答by harishr
i have written directives for very similar purpose, I am using moment.js for date validations, but you can replace them with javascript Date object.
我已经为非常相似的目的编写了指令，我使用 moment.js 进行日期验证，但您可以将它们替换为 javascript Date 对象。
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
};
});
回答by Mohan Seth
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);
}
}
}
})
}
};
})
