Hi everybody,

We have a nice complex directive with the following template:

<div class="input-group">
    <input type="text" autocomplete="off" id="{{name}}" name="{{name}}" class="form-control" placeholder="{{placeholder}}" />
    <span class="input-group-addon datepickerbutton">
        <!--datepickerbutton:jquery datetimepicker plugin requires this class-->
        <i class="icon-calendar"></i>
    </span>
    <span class="input-group-addon datetimepicker-input-addon-button" ng-if="showBod" ng-click='setBod()'><i class="icon-sun"></i></span>
    <span class="input-group-addon datetimepicker-input-addon-button" ng-if="showEod" ng-click='setEod()'><i class="icon-moon"></i></span>
    <span class="input-group-addon datetimepicker-input-addon-button" ng-if="showNow" ng-click='setNow()'>Now</span>
</div>
<div class="field-validation-error">
    <span ng-show="!validStartDateRange()">Start date must begin before end date.</span>
    <span ng-show="!validEndDateRange()">End date must begin after start date.</span>
    <span ng-show="!validRequired()">Date is required.</span>
    <span ng-show="!validFutureDate()">Date must be in the future.</span>
    <span ng-show="!validPastDate()">Date must be in the past.</span>
</div>

The problem is that I can type any garbage text in the date field. The date is not saved in this case, but I'd rather have it automatic validation for valid date format. I know there is HTML 5 date type, but it doesn't work in our situation as this directive should work for both date and datetime and also it has its own date picker which is called from an extra button.

So, do you know what can be done to make sure the input is correct date?