#angularjs #angular-ui-bootstrap #bootstrap-datepicker
#angularjs #angular-ui-bootstrap #bootstrap-datepicker
Вопрос:
Я новичок в Angular JS и пытаюсь реализовать проверку для средства выбора даты и времени в моем проекте Angular.
Я использую средство выбора даты начальной загрузки.
Мой HTML :
<div>
<form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal">
<fieldset>
<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" data-ng-model="reservation.reservedFrom"
validator="required" required-error-message="Date is required" valid-method="watch" id="startDate"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</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(startDate,endDate)'/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span>{{errMessage}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
</fieldset>
</form>
</div>
Мой контроллер :
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 () {
if ($scope.editReservationForm.$valid) {
reservationServices.updateReservation($scope.reservation).then(function (result) {
$scope.data = result.data;
if (!result.data.error) {
$state.transitionTo('employeeTalentPool', {
id: $state.params.id
});
}
});
}
};
$scope.checkErr = function (startDate, endDate) {
$scope.errMessage = '';
var curDate = new Date();
if (new Date(startDate) > new Date(endDate)) {
$scope.errMessage = 'End Date should be greater than start date';
return false;
}
if (new Date(startDate) < curDate) {
$scope.errMessage = 'Start date should not be before today.';
return false;
}
};
$scope.cancel = function () {
$location.path("/reservations");
}
}]);
Я совершенно новичок в Angular и пытаюсь понять это, выполняя проекты. Может ли кто-нибудь проверить и предоставить решение?
Ответ №1:
Нет необходимости передавать startDate
endDate
переменные and в ng-change
метод во втором средстве выбора даты; вы уже отслеживаете эти переменные в своем $scope
with ng-model
.
$scope.checkErr = function() {
var start = new Date($scope.reservation.reservedFrom),
end = new Date($scope.reservation.reservedTill);
if (end < start) {
$scope.errorMsg = "End must be after start";
}
... other logic ...
};
Кроме того, может быть лучше просто запретить пользователю делать неправильный выбор.
Две ошибки, от которых вы, похоже, хотите защититься: 1) пользователь выбирает a startDate
до сегодняшнего дня и 2) пользователь выбирает an endDate
перед startDate
.
Обе вышеуказанные ошибки можно предотвратить, изменив minDate
параметр внутри datepicker-options
. Проверьте $watch
в этом плунжере — каждый раз, когда мы выбираем новую начальную дату, мы можем изменить minDate
параметр для даты окончания и предотвратить проблемы с пользовательским вводом.
Обновление (по запросу)
Плунжер показывает два указателя даты, оба из которых имеют свои собственные пользовательские datepicker-options
привязки как переменные $scope — мы сможем изменить их datepicker-options
, чтобы изменить поведение каждого datepicker
.
Значение по умолчанию startDateOptions
«minDate» до сегодняшнего дня (в пределах CTRL) делает невозможным для пользователя выбор startDate
до сегодняшнего дня (решение первой проблемы, которую вы пытались предотвратить).
Размещение $watch на startDate
позволяет нам обновлять endDateOptions
после любого изменения startDate
. Это позволяет нам ограничить выбор пользователей для endDate
ввода, установив значение minDate
независимо startDate
от того, что есть (решая вторую проблему выбора endDate
перед a startDate
).
В $watch также есть некоторая логика для настройки endDate
, где это имеет смысл (например, если мы сначала выбрали допустимое endDate
, но затем выбрали новое startDate
, которое сделало бы это endDate
недействительным).
Комментарии:
1. Итак, как я должен использовать код в плунжере, чтобы соответствовать моему случаю? Как ng-model =? Не могли бы вы внести изменения в свой ответ, включив функциональность, показанную в plunker? Это было бы большим подспорьем для меня, чтобы понять, как это работает.
2. Обновление 🙂 Плунжер предназначен только для иллюстрации — я бы сохранил вашу
ng-model
реализацию, как вы этого хотите. Не думайте, что вам нужно принятьdatepicker-options
вышеуказанное, ваш первоначальный подход с сообщениями об ошибках тоже был действительным.