$element.data('daterangepicker').startDate throwing Cannot read property 'startDate ' of undefined

[stacey-david]

When the page has loaded the line $element.data('daterangepicker').startDate within the $scope.$watch statement is throwing a "Cannot read property 'startDate ' of undefined" error.

Has anyone seen this error before or have an idea what might be causing it?

[maxailloud]

I just tried to use this directive and I got this error. Don't know where it come from now but I'm looking to it.

I'm using angular 1.3.0 beta14.

[stacey-david]

Hi @maxailloud

Have you had any look figuring out what is causing the issue?

[maxailloud]

Unfortunately no. And I had to change directive because of library already used in my project. So I didn't investigate further.

[Durairaj]

I got the same issue. The issue was related to overwritting of the $el value. Script loading order fixed this one.

[Progdom]

I am getting this issue as well.

[jpetraws]

Had the same issue I forgot to add

<script type="text/javascript" src="daterangepicker.js"></script>

So your full imports should be:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ng-bs-daterangepicker.js"></script>

Double check to make sure you have all of these in your html. Some of them are not located in this repo such as daterangepicker-bs3.css and daterangepicker.js. You will have to grab those from the original non-angular version of this repo

[alanjames1987]

@stacey-david @maxailloud @Progdom are you still getting this error?

[maxailloud]

Don't use it anymore so I can't answer to that.

[mbret]

Still have the issue. The only "easy" fix is to set a date to the scope in controller. Passing a undefined value of ngModel throw the "TypeError: Cannot read property 'startDate' of .."

[aevo-tech]

+1

Having the same issue here...

[nirav2410]

bs-daterangepicker needs startDate as compulsory parameter to be passed on initialization. You should pass at least null to leave it blank or any date object. for ex. $scope.profile.birthday = {startDate: null}

[rajendrattnd]

This issue still exist.

[ZAKRUTKA]

This issue still exist.

[yusoph-dev]

call this function to make this work.

function CallDateRange(){
  var start = moment();
  var end = moment();

  function cb1(start, end) {
    $('._dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  }

  $('._dateRange').daterangepicker({
    startDate: start,
    endDate: end,
		opens: "left",
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, cb1);
}

CallDateRange();
		
var startDate   =  $("._dateRange").data('daterangepicker').startDate.format("YYYY-MM-DD");
var endDate     =  $("._dateRange").data('daterangepicker').endDate.format("YYYY-MM-DD");