【发布时间】：2017-03-02 00:13:33
【问题描述】：
我已经在我的 Angular 应用程序中实现了一个带有验证的日期选择器。
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。如果需要更多信息，请告诉我。
提前致谢。
【问题讨论】：
-
我不知道如何通过链接控制器和指令等来创建 Plunkr 或 Fiddle...抱歉
-
core-date-picker这是你的 datepicker 自定义指令吗？我没有在您的代码中看到您正在使用 UI-bootstrap datepicker。 -
我正在使用引导日期选择器。不确定与 UI Bootstrap datepicker 有什么区别。我得到了这个应用程序。你认为我应该改用 UI 日期选择器吗？我尝试从 html 标记中删除 'core-date-picker' 并且验证变得无效
标签： angularjs datepicker