Bootstrap datetime picker not working for directives in Angular JS

Question

I am using Bootstrap Datetime picker where the data is taken from json file, converting into proper date format and then displaying it in calender. I have To date and From date.

scope.onHide = function(e) {              
  var frmDateVal = $j("#fromdatetimepicker").val();
  var toDateVal = $j("#todatetimepicker").val();
  scope.fromDate = scope.dateTimetoUTCMilliseconds(frmDateVal);
  scope.toDate = scope.dateTimetoUTCMilliseconds(toDateVal);
  scope.plotDataSeries();
  scope.$digest();
};


$("#fromdatetimepicker").on("dp.change", function (e) {
  $('#todatetimepicker').data("DateTimePicker").minDate(e.date);
});

What is the solution for replacement of $("#element") in angularjs.

Answer 1

I think you should read this post to avoid using jQuery in angularJS the wrong way : "Thinking in AngularJS" if I have a jQuery background?

Also, there is a library existing in AngularJS that can help you using Bootstrap components : this is UI Bootstrap.

You can find the datepicker documentation for this library here : https://angular-ui.github.io/bootstrap/#/datepicker

I think it would be the easier way to do it.