我已在Angular App中实现了带有验证的日期选择器。
HTML：
<div class="control-group">
<label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<!--<input type="text" class="span4" style="width:150px" name="reservedFrom" placeholder="Reserved From" ng-model="reservation.reservedFrom" ng-change='checkErr()'
validator="required" required-error-message="Date is required" id="startDate122" />-->
<input class="form-control" type="text" name="startDate" core-date-picker ng-model="reservation.reservedFrom" >
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageFrom}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<!--<input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill"
validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr()' />-->
<input class="form-control" type="text" name="EndDate" core-date-picker ng-model="reservation.reservedTill" ng-change='checkErr()' id="endDate1">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageTo}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
控制器：
myApp.controller('editReservationController', ['$scope', '$filter', 'reservationResolved', 'pocResolved', 'accountResolved', 'reservationServices', '$location', '$state',
function ($scope, $filter, reservationResolved, pocResolved, accountResolved, reservationServices, $location, $state) {
$scope.reservation = new Object();
$scope.accounts = accountResolved.data;
$scope.pocs = pocResolved.data;
$scope.reservation.employee = reservationResolved.data;
$scope.updateReservation = function () {
var from = $scope.reservation.reservedFrom;
var till = $scope.reservation.reservedTill;
if ($scope.editReservationForm.$valid && $scope.checkErr()) {
var from = $scope.reservation.reservedFrom;
var till = $scope.reservation.reservedTill;
//var t = $scope.checkErr();
//TODO: fix it properly
$scope.reservation.reservedTill = '';
$scope.reservation.reservedFrom = '';
$scope.reservation.reservedFrom = $('#startDate').val();
$scope.reservation.reservedTill = $('#endDate').val();
reservationServices.updateReservation($scope.reservation).then(function (result) {
$scope.data = result.data;
if (!result.data.error) {
$state.transitionTo('employeeTalentPool', {
id: $state.params.id
});
}
});
}
};
$scope.cancel = function () {
$location.path("/reservations");
};
$scope.$watch("reservation.reservedFrom", function (newValue, oldValue) {
$scope.checkErr();
});
$scope.$watch("reservation.reservedTill", function (newValue, oldValue) {
$scope.checkErr();
});
$scope.getCurrentDate = function() {
var utcDate = new Date();
var isoExtendedDate = utcDate.toISOString();
var isoSimpleDate = isoExtendedDate.split("T")[0];
return isoSimpleDate;
}
$scope.checkErr = function () {
var startDateStr = $scope.reservation.reservedFrom;
var endDateStr = $scope.reservation.reservedTill;
var startDate;
if (startDateStr != undefined) {
startDate = new Date(startDateStr);
}
var endDate;
if (endDateStr != undefined) {
endDate = new Date(endDateStr);
}
$scope.errMessageFrom = '';
$scope.errMessageTo = '';
var myDate = new Date(); // Set this to your date in whichever timezone.
var utcDate = myDate.toUTCString();
if (startDate != undefined && startDate < new Date()) {
$scope.errMessageFrom = 'Start Date should be greater than or equal to present day.';
return false;
}
if (endDate != undefined && new Date(endDate) < new Date()) {
$scope.errMessageTo = 'End Date should be greater than or equal to present day.';
return false;
}
if (startDate != undefined && endDate != undefined && endDate <= startDate) {
$scope.errMessageTo = "End date must be after start day.";
return false;
}
return true;
};
}]);
App.js：
//Date Picker
myApp.directive('coreDatePicker', function ($compile) {
return {
restrict: 'A',
require: 'ngModel',
compile: function (element, attrs) {
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
return this.link;
},
link: function (scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(element.val());
});
});
}
};
});
我将解释我正在讨论的情景。
问题1 - 我从日历中选择了一个日期，并在日期选择器文本框中正确显示。然后我再次单击日期选择器以选择不同的日期，但之后我决定不更改当前选择的日期，因此我在日历外单击而未选择第二次日期。由于我没有第二次选择日期，日期选择器从文本框中清除了第一个选择的日期，使其为空。我不希望这种情况发生。我希望首先选择的日期保留在那里，除非选择了不同的日期（不是空值）。
第2期 - 在验证日期时，我无法将所选日期与当前日期进行比较。如果所选日期小于当前日期，则应显示错误消息。但在我的情况下，如果我选择与今天相同的日期，则会显示错误。它应该允许我选择当天。
我使用过Bootstrap-datepicker。如果需要更多信息，请告诉我。
提前致谢。
答案 0 :(得分：1)
我很快就注意到了，
link: function (scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(element.val());
});
});
}
应该开火吗？我从问题1 中理解的是，无论是否有变化，它都会触发。你有没有想过在
尝试一些检查$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(element.val());
});
});
尝试
$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
if(element.val()) {
ngModelCtrl.$setViewValue(element.val());
}
});
});
只需对element.val（）进行一点点检查就不会有害。
对于第二期，我认为你不能比较日期。
new Date()
返回
2016年10月20日星期四14:54:17 GMT + 0800（马来半岛标准时间）
你的startDateStr
注意new Date()有几秒和几毫秒。
如果您只是想比较日期，月份和年份，(DD/MM/yyyy)我建议您在比较之前转换日期。
或者单独比较
startDate.getDate() < new Date().getDate() // To compare a day
var startDate = moment(startDateStr, 'MM-DD-YYYY').format('MMMM D');
var today = moment().format('D MMM, YYYY');
if (startDate != undefined && startDate < today) {
}
<强>更新
您是否尝试过将检查移至
$scope.$watch("reservation.reservedFrom", function (newValue, oldValue) {
if(newValue && newValue !== oldValue) {
$scope.checkErr();
}
});
$scope.$watch("reservation.reservedTill", function (newValue, oldValue) {
if(newValue && newValue !== oldValue) {
$scope.checkErr();
}
});
使用＆lt; =或＆gt; =比较两个日期对象时，会通过valueOf对它们进行比较，这与Date的getTime相同。
但是当你使用==时，它们是同一类型的两个不同的对象，所以它返回false。
所以在你的情况下^比较两个日期。正确的方法是
var startDate = moment(startDateStr, 'MM-DD-YYYY').format('MMMM D');
var today = moment().format('D MMM, YYYY');
if (startDate != undefined && startDate.getTime() < today.getTime()) {
}
这些解释是Here。您可以查看链接以获取更多解释。
getTime将日期转换为一个等价的纪元，它基本上是数字/数字值，可以被comapred。 new Date()是一个对象，因此new Date('10/20/2016')和对象A不能等于对象b。要了解这一点，您可以尝试使用浏览器控制台。
new Date() === new Date();
> false
但是
new Date().getTime() === new Date().getTime()
>true;
第一个是false是假的，因为你正在比较两个对象。第二个相当于与数值进行比较。毕竟
new Date().getTime()
>1477011127232