[SOLVED] How to know if invalid date was entered using Angular-Strap datepicker

How to know if invalid date was entered using Angular-Strap datepicker

I'm using a very simple implementation of the Angular-Strap datepicker directive. On the home page for Angular-Strap, if something invalid is entered, the input text elements indicates this by outlining with red. I'm not getting that in my implementation:

<input type="text" size="10" class="form-control" ng-model="vm.InitiationDate" date-format="yyyy-MM-dd" autoclose="true" name="date" bs-datepicker />

What is causing the input element on the Angular Strap sample page to go red, but no validation seems to occur on my page?

Solution

The date picker needs to be part of a <form> and then the ng-class directive can select an error class.

<form name="datepickerForm" class="form-inline" role="form">
  <!-- Basic example -->
  <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
    <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
    <input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
  </div>

For more information: