JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="TestController">
       <input super-directive></input>
        <p><strong>Test value:</strong> {{test}}</p>
    </div>
</div>

CSS

.custom-datepicker {
    background: blue;
}

JavaScript

angular.module('app',[])
  .directive('superDirective', function ($compile) {
    return {
      restrict: 'A',
        template : '<input datepicker ng-model="test" />',
      replace: true,
      priority:50
    };
  })
.directive('datepicker', function () {
    return function ($scope, $element, $attrs) {
        $element.addClass('custom-datepicker');
    }
});

angular.module('app').controller('TestController',
function ($scope){
    $scope.test = 'AAA';
});