>>>>Hi everybody,
>>>>
>>>>I have the following directive:
>>>>

>>>>app.directive('smDateTimePicker', [function () {
>>>>        return {
>>>>            require: 'ngModel',
>>>>            restrict: 'E',
>>>>
>>>>            scope: {
>>>>                ngModel: '=',//the date being saved to the database
>>>>                compareDate: '=',//either the start or end date of the range for validation (isDateRange attr must be set to true)
>>>>                form: '=',//the name of the form (if a subform, this will be parent.subform), used for setting the form to dirty and validation
>>>>                name: '@',//the input's name, used to manually outline invalid fields in red
>>>>                placeholder: '@',//text of placeholder on input field, 
>>>>                showBod: '=',//if true, we display the Beginning of Day button (pickTime must be true)
>>>>                showEod: '=',//if true, we display the End of Day button (pickTime must be true)
>>>>                showNow: '=',//if true, we display the Now button
>>>>                setBod: '&',//function defined in the directive that is called when clicking on the BOD button
>>>>                setEod: '&',//function defined in the directive that is called when clicking on the EOD button
>>>>                setNow: '&',//function defined in the directive that is called when clicking on the Now button
>>>>                validStartDateRange: '&',//function defined in the directive that determines whether to show validation message
>>>>                validEndDateRange: '&',
>>>>                validRequired: '&',
>>>>                validFutureDate: '&',
>>>>                validPastDate: '&'
>>>>            }

>>>>
>>>>and the template is
>>>>
>>>>

>>>><div class="input-group">
>>>>    <input type="text" autocomplete="off" id="{{name}}" name="{{name}}" class="form-control" placeholder="{{placeholder}}" />
>>>>    <span class="input-group-addon datepickerbutton">
>>>>        <i class="fa fa-clock-o"></i>
>>>>    </span>
>>>></div>
>>>><div class="field-validation-error">
>>>>    <span ng-show="!validTimeRange()">@Messages.invalidStartTime</span>    
>>>></div>

>>>>
>>>>So, in my form I have it
>>>>
>>>>

>>>><data-sm:-time-picker ng-model="result.bHoldExpires"
>>>>                                                          form="form.editMax4saleGeneralForm.subCategoriesRow"
>>>>                                                          class="col-md-9"
>>>>                                                          ng-readonly="!result.isbHold" 
>>>>                                                          name="bHoldExpires"
>>>>                                                          placeholder="00:00"
>>>>                                                          is-time-range="false">
>>>>                                    </data-sm:-time-picker>

>>>>
>>>>and ng-readonly has no effect and also I can type anything (all letters) in the textbox. I am wondering if we should have a simple way of exposing the readonly property.
>>>>
>>>>Thanks in advance.
>>>
>>>'smDateTimePicker' and data-sm:-time-picker ?
>>
>>Yes, it's the same directive as AngularJs has some rules and when we use Camel case for myDirective it becomes my-directive when it's used. When you add data prefix (to avoid JavaScript warnings in VS), it becomes data-my:directive.
>>
>>But you didn't answer my question. I suppose the only way is to introduce readonly flag in the directive properties.
>
>Where do you have a "TimePicker" directive. I see a "DateTimePicker"

Do you mean this portion in the template

<span class="input-group-addon datepickerbutton">
>>>        <i class="fa fa-clock-o"></i>
>>>    </span>

or what exactly do you mean?

If that, then it's from the macadmin theme we have, I think, but I can make a quick research on this. It's not too relevant to the question, though, I think.