Extend Angular-UI Datepicker directive

Question

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?

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
– Dane Macaulay, Commented Mar 9, 2016 at 15:58
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
– Dane Macaulay, Commented Mar 9, 2016 at 16:21

Austin · Accepted Answer · 2016-03-09 17:42:56Z

0

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

answered Mar 9, 2016 at 17:42

Austin

1,29110 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DaCh Over a year ago

As i can understand there is many ways to do this. but the way i used to fix my problem was this. an there for i accepted this as the answer. If anyone out there run into this post, then i would recommend that you read Dane Macaulay comment on the main thread

eightdotthree · Accepted Answer · 2016-03-09 20:08:16Z

0

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

answered Mar 9, 2016 at 20:08

eightdotthree

464 bronze badges

Collectives™ on Stack Overflow

Extend Angular-UI Datepicker directive

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related