I found a similar question but it lacks a satisfactory answer
Can anyone explain why the uib-datepicker-popup directive isn't functioning as an Angular UI date picker in the code below?
Is there a specific flag or compile option that I'm missing for this directive?
I have adapted the example from the datepicker-popup documentation in Angular-UI to work within a custom directive. Interestingly, it functions when applied with the controller but fails to work in my directive implementation.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('timeScale',()=>({
template: `
<h1>Scope:</h1>
<ul>
<li>format: {{format}}</li>
<li>dt: {{dt}}</li>
<li>popup: {{popup}}</li>
<li>dateOptions: {{dateOptions}}</li>
</ul>
<input type="text"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="popup.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"/>
`,
link: $scope => {
$scope.format = 'dd-MMMM-yyyy'
$scope.dt = null;
$scope.popup = {
openend: false
};
$scope.dateOptions = {
dateDisabled: false,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
}
}
}));<body ng-app="ui.bootstrap.demo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<time-scale></time-scale>
</body>