TypeError: Undefined on module pattern of object instances

Question

This is kind of a follow-up to this question:

How to have at least two datepickers of ui-bootstrap on a single page?

It does a great job of having an elegant way to handle multiple instances of angular bootstrap datepicker elements on the same view/page. At least it appears to... I get the following error.

TypeError: Cannot set property 'BeginDate' of undefined

This occurs when I click to attempt to open the date dialog. It happens on the line below, which you can see in the code sample below that. The instances object is undefined.

method.instances[instance] = true;

From what I can tell, my code and the example in the other question are nearly identical.

Example controller code:

$scope.datePicker = (function() {

    var method = {};
    var instances = [];

    method.open = function ($event, instance) {
        $event.preventDefault();
        $event.stopPropagation();

        method.instances[instance] = true;
    };

    method.minDate = new Date();

    method.maxDate = new Date(2023, 12, 24);

    method.options = {
        formatYear: "yyyy",
        startingDay: 1
    };

    method.format = "dd-MM-yyyy";

    return method;
}());

Example element code:

<div class="form-group">
    <label for="beginDate" class="col-md-5">Begin Date</label>
    <input type="text" name="beginDate" ng-model="codeCamp.BeginDate" datepicker-popup="{{datePicker.format}}" min-date="datePicker.minDate" max-date="datePicker.maxDate" datepicker-options="datePicker.options" is-open="datePicker.instances['BeginDate']" ng-required="true" close-text="Close" class="form-control" required />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'BeginDate')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</div>
<div class="form-group">
    <label for="endDate" class="col-md-5">End Date</label>
    <input type="text" name="endDate" ng-model="codeCamp.EndDate" datepicker-popup="{{datePicker.format}}" min-date="datePicker.minDate" max-date="datePicker.maxDate" datepicker-options="datePicker.options" is-open="datePicker.instances['EndDate']" ng-required="true" close-text="Close" class="form-control" required />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'EndDate')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</div>

Luca Colonnello · Accepted Answer · 2015-10-03 21:01:57Z

1

Have you tried to create the instances array in the method object?

Instead of this:

var method = {};
var instances = [];

Use this:

var method = {};
method.instances = [];

Let me know!

answered Oct 3, 2015 at 21:01

Luca Colonnello

1,45612 silver badges11 bronze badges

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

2 Comments

Will Strohl Over a year ago

I just tried that, but it gives me a different error: Unexpected token.

Will Strohl Over a year ago

Actually, I'm wrong. I had an extra var that I didn't see. Thanks! :)

Collectives™ on Stack Overflow

TypeError: Undefined on module pattern of object instances

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related