>>>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"