Validate start date and end date on AngularJS Bootstrap date picker? - angularjs

Question

I am new to Angular JS and I am trying to implement validation for date time picker in my Angular project.
I am using bootstrap date picker.
My HTML is :
<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>
My Controller is :
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");
}
}]);
I am totally new to Angular and I'm trying to understand it by doing projects. Can anyone have a check and provide a solution?

Answer 1

There is no need to pass in the startDate and endDate variables into the ng-change method on your second datepicker; you are already tracking those variables on your $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 ...
};
Additionally, it may be best to just prevent a user from making bad choices.
The two errors you seem to want to guard against are: 1) the user chooses a startDate before today and 2) the user chooses an endDate before the startDate.
Both of the errors above can be prevented by modifying the minDate option within datepicker-options. Check out the $watch in this plunker -- each time we select a new start date, we can modify the minDate option for the end date and prevent user input issues.
Update (per request)
The plunker shows two datepickers, both of which have their own custom datepicker-options bound as $scope variables -- we'll be able to modify these datepicker-options to change the behavior of each datepicker.
Defaulting startDateOptions "minDate" to today (within the CTRL) makes it impossible for a user to pick a startDate before today (solving the first issue you were trying to prevent).
Placing a $watch on the startDate allows us to update the endDateOptions after any a change of the startDate. This allows us to restrict a users choices for the endDate input by setting minDate to whatever the startDate is (solving the second issue of choosing an endDate before a startDate).
There is also some logic in the $watch to adjust endDate where it makes sense (like if we first selected a valid endDate, but then selected a new startDate that would make that endDate invalid).