Extend Angular-UI Datepicker directive

1
votes

I have been using the ui-datepicker from Angular-ui-bootstrap a lot, but every time I use it, I need to set it up, the same way I do every time. So I was wondering if I could create a directive called custom-datepicker I could use like 

<custom-datapicker>

So that I can set the settings in the directive once, and then reuse it everywhere on my site.

I tried to create a directive like this one below

app.directive('customDatapicker', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        templateUrl: function (elem, attrs) {
            return '/AngularJS/Directives/customDatapicker.html'
        },
        link: function (scope, element, attrs, ngModel) {
        $scope.inlineOptions = {
            showWeeks: true
        };

        $scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1
        };


        $scope.open = function () {
            $scope.opened = true;
        };

        $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];

        $scope.selected = {
            opened: false
        };

        },
});

I am also trying to use a template, so that i can do some custom html wrapper around it. So far I have got nothing besides the sample html from

TemplateHTML

<p class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="ngModel" is-open="selected.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>

In the Template html I'm trying to make the binding between my directive's input model in the datepicker's ng-model by doing ng-mode='ngModel', which i don't think is the right way.

I use my directive in my html page like this, where data is a JS Date Object

<custom-datapicker ng-model='data'>

Can this be done?

2
angularjsangularjs-directiveangular-ui-bootstrapangular-ui-datepicker
You can create a directive with the same name and provide a link function that will do your setup, but this will change all instances of it. – Dane Macaulay
thats fine, but can i call the directive what i want? – DaCh
Not this way. Think you can create a directive and use it on the same element. For instance. <input uib-datepicker-popup ... my-date-picker>. – Dane Macaulay
have you looked at stackoverflow.com/questions/17005122/… – Dane Macaulay

2 Answers

0
votes

Instead of using ng-model on your custom directive, define a custom attribute, then pass that value into the ng-model attribute of the datepicker.

<custom-datepicker customAttrib="val" ...

Then in the template:

<input ng-model="{{customAttrib}}" ...
0
votes

Interestingly I have been looking at something very similar today. You can pass your model using a two way binding and it mostly works.

<my-datepicker ng-model="myDateModel"></my-datepicker>

Directive:

scope: {
    ngModel: '='
}

Template:

<input type="text" ng-model="ngModel" />

The issue is that if you manipulate the model outside of using the datepicker the model classes (ng-valid, ng-touched, etc) on your directive don't update. The classes on the input and the form do...