CODEWITHSUNDEEP
angularjstwitter-bootstrapeonasdan-datetimepicker
Vladds7
Vladds7

Reputation: 81

Cannot read property of undefined bootstrap eonasdan datetimepicker

I am using eonasdan datetimepicker and I can not manage to access the data functions from Angular controller.

The following code generates "TypeError: Cannot read property 'setValue' of undefined" 

var d = new Date();
d.setHours(d.getHours() - 8);
m = moment(d);
$("#datetimepicker").data("DateTimePicker").setValue(m);

Since the onChange event is triggered in next code, the problem is not in the selector.

    $("#datetimepicker").on("dp.change", function (e) {
        console.log(e.date._d););
    });

As I discovered the bootstrap-datetimepicker.js defines the DateTimePicker data, as well as it implements the setValue function.

 if (!$this.data('DateTimePicker')) {
                // create a private copy of the defaults object
                options = $.extend(true, {}, $.fn.datetimepicker.defaults, options);
                $this.data('DateTimePicker', dateTimePicker($this, options));
            }

setValue = function (targetMoment)

What I do wrong ?

Upvotes: 2

Views: 908

Answers (1)

Vladds7
Vladds7

Reputation: 81

The problem was that I called the $("#datetimepicker").data("DateTimePicker") outside DOM.

Solved by implementing a directive with isolated scope for binding the Ng-Model to datetimepicker.

    .directive('timepicker', [
  function () {
      var link;
      link = function (scope, element, attr, ngModel) {
          element = $(element);
          element.datetimepicker({
              locale: 'sv',
              inline: true,
              sideBySide: true,
              stepping: 30,
              defaultDate: scope.date
          });
          element.on('dp.change', function (event) {
              scope.$apply(function () {                      
              scope.date = event.date._d;;
              });
          });
      };

      return {
          restrict: 'A',
          scope: {
              date: '=ngModel'
          },
          link: link        
      };
  }
    ])

As K.Toress explains How to set default date in datetimepicker with ngmodel?.

Upvotes: 0

Related Questions