2

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?

Gloria Santin
  • 2,066
  • 3
  • 51
  • 124

0 Answers0