Angular and Datepicker as directive

Question

I am trying to make a directive for a datepicker because I have multiple date input fields on a form and so would like to reuse the code. I have tried many versions that I have seen all over the web but am having troubles. What I would like is that when the user tabs/clicks into a field they are presented with a calendar that they can choose a date.

Below is the latest version of what I am trying.

My directive:

var app = angular.module('myApp.directives', []);

app.directive('ngDate', function() {
   return {
     restrict: 'A',
     require : 'ngModel',
     link : function (scope, element, attrs, ctrl) {
            element.datepicker({
            changeYear:true,
            changeMonth:true,
            dateFormat:'dd/M/yy',
            onSelect:function (date) {
                 ctrl.$setViewValue(date);
                 scope.$apply();
                }
            });
        }
    }; 
});

My HTML for one field:

<input type='text' data-ng-model='programDetails.requestDate' data-ng-date=''>

What happens with this is I get an error saying:

TypeError: element.datepicker is not a function

Any ideas as to what I am missing? I have tried quite a few and most give me an error that is very similar. My goal would be to add 4 more of the HTML lines for 4 other date fields.

EDIT: I ended up getting the Bootstrap datepicker to work....BUT...I have four of them on the screen for 4 different dates. The problem is when one opens, they all open...I need one to open at a time. I'm guessing I somehow need to tie the open/close to each date somehow.

Here is the new HTML for one of the date fields (each look the same, just different ng-models):

    <span class="input-group" >
        <input type="text" class="input-sm " datepicker-popup="{{format}}"  ng-model="programDetails.startDate" is-open="opened"  datepicker-options="dateOptions" ng-focus="open($event)" ng-click="open($event)" close-text="Close" ng-change="updateDate(programDetails.startDate)" />
        <span class=" input-sm" >
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </span>

Controller:
    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
  };

How do I tie the open to each particular date field?

jValdron · Accepted Answer · 2015-10-09 18:15:42Z

0

datepicker is the jQuery UI datepicker plugin. You don't seem to have it included at the moment. Download and include the jQuery UI library, or use a different library, such as angular-datepicker.

answered Oct 9, 2015 at 18:15

jValdron

3,4181 gold badge31 silver badges44 bronze badges

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

1 Comment

user3861284 Over a year ago

thanks. I tried using the angular-datepicker (I downloaded the js files) and think I made the HTML changes....now at least I don't get errors but it doesn't pop up with a calendar. guess i'm still not doing it right.

Community · Accepted Answer · 2017-05-23 11:44:49Z

0

After switching to bootstrap's datepicker, I did get it to work as described in my edit. I then had trouble where all datepickers would open at once. I found a solution here Multiple Datepickers

Thanks for the help.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 10, 2015 at 19:39

user3861284

2492 gold badges11 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular and Datepicker as 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