I am currently utilizing AngularJS along with AngularJS bootstrap within my webpage. One of the components I have is a date picker directive that is structured like this:
<div class="form-group {{dateStatus.class}}">
<p class="input-group">
<input type="text" id="inpDate" class="form-control"
datepicker-popup="dd-MMMM-yyyy" ng-model="task.date"
is-open="datePickerStatus.isOpen" min-date="minDate"
datepicker-options="dateOptions" ng-required="true"
close-text="Close" placeholder="Due date"
ng-change="checkDateValidity()"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openDatePicker($event)"
>
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
In order to validate the date input, I have implemented the following function in my controller:
$scope.checkDateValidity = function(){
var date,
isValid,
taskDate;
taskDate = $scope.task.date;
date = new Date(taskDate);
isValid = !isNaN(date);
if(isValid) {
$scope.addButtonState.isOk = true;
$scope.dateStatus.class = '';
}
else{
$scope.addButtonState.isOk = false;
$scope.dateStatus.class = 'has-error';
}
}
Currently, everything is functioning correctly in validating the entered date, however, I encountered an issue where when the date input is left empty (or changed from valid to blank), I want it to be considered acceptable as well. Due to both empty and invalid dates resulting in undefined, I am unsure how to differentiate between them.
I also contemplated directly reading the input text using this approach:
document.getElementById('inpDate').value
However, the ng-change event is triggered only when the value is altered, leaving me with the previous value which is now irrelevant...
Thank you for your time and any assistance provided.