There was a html file for a date-picker in the project that I am using. The html is as follows:
<span class="input-group">
<input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="model" min-date="minimum" is-open="opened" datepicker-options="datepickerOptions" date-disabled="notused" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
The file is named: date-picker.html I use this directive in a modal and it works fine but I want to highlight the inputs so the user knows that they are required. This is my current html:
<div style="margin: 5%; display: inline-block;">
<label id="startDateLabel" style="margin-left: 5%">Start Date:</label>
<date-picker id="startDatePicker" type="text" model="updateWrhParams.startDate" style="width: 50%; float: right;" aria-required="true"></date-picker>
</div>
<div style="margin: 5%; display: inline-block;">
<label id="endDateLabel" style="margin-left: 5%">End Date:</label>
<date-picker id="endDatePicker" type="text" model="updateWrhParams.endDate" style="width: 50%; float: right;" aria-required="true"></date-picker>
</div>
I tried adding aria-required="true"
within the date-picker as an attribute to no avail.
Also tried adding required
and class="requiredField"
This last option works in the same html for input and select fields.
Can a date-picker not use these attributes?
UPDATE
The attributes requiredField
are defined in a css field for input and select. I need to add this attribute the the date-picker
element defined in the html file date-picker
The required attributes are defined like this:
input.requiredField.ng-valid {
border: 1px solid #449d44;
box-shadow: 0px 0px 2px #449d44;
}
input.requiredField.ng-invalid {
border: 1px solid #A33441;
box-shadow: 0px 0px 2px #A33441;
}
How can I apply these css attributes to the date-picker html element?