Transforming Bootstrap datepicker directive to AngularJS Material - angularjs

Question

I have beginner knowledge of angularjs and am having problems transforming a Datepicker directive that uses a Bootstrap template to AngularJS Material. The original Bootstrap template looks like this:
template:
'<div ng-class="{\'input-group\': !snDisabled, \'has-error\': isInvalid}" style="width: 100%;">' +
'<input type="text" name="{{field.name}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="formattedDate" ng-model-options="{updateOn: \'blur\', getterSetter: true}" ng-disabled="snDisabled" />' +
'<span class="input-group-btn" ng-hide="snDisabled">' +
'<input type="hidden" class="datepickerinput" ng-model="formattedDate" ng-readonly="true" />' +
'<button class="btn btn-default" type="button">' +
'<glyph sn-char="calendar" />' +
'</button>' +
'</span>' +
'</div>',
However, I've updated it to AJS Material:
template: '<div ng-class="{\'input-group\': !snDisabled, \'has-error\': isInvalid}" style="width: 100%;">' +
'<md-datepicker md-open-on-focus name="{{field.name}}" md-placeholder="{{field.placeholder}}" ng-model="formattedDate" ng-model-options="{updateOn: \'blur\', getterSetter: true}" ng-disabled="snDisabled"/>' +
'</div>',
When I load the page and check my console, I see an error "TypeError: Cannot read property 'setDate' of undefined"
Going back in the code, I realize that it calls upon an class element on the page input-group-btn, which doesn't appear in AngularJS Material:
link: function(scope, element, attrs, ngModel) {
var includeTime = scope.snIncludeTime;
var format;
format = includeTime ? dateTimeFormat.trim() : dateFormat.trim();
format = format.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/a/g, 'A');
var dp = element.find('.input-group-btn').datetimepicker({
keepInvalid: true,
pickTime: scope.snIncludeTime === true,
format: "X"
}).on('dp.change', onDpChange);
function onDpChange(e) {
scope.formattedDate(e.date.format(format));
if (!scope.$root.$$phase)
scope.$apply();
}
function validate(formattedDate) {
scope.isInvalid = false;
if (formattedDate == null || formattedDate == '') {
dp.data('DateTimePicker').setValue(new Date());
return '';
}
if (isValidDate(formattedDate, format)) {
dp.data('DateTimePicker').setDate(moment(formattedDate, format));
} else if (isValidDate(formattedDate, moment.ISO_8601)) {
var date = moment.utc(formattedDate).clone().local();
dp.data('DateTimePicker').setDate(date);
formattedDate = date.format(format);
} else {
scope.isInvalid = true;
}
return formattedDate;
}
if (ngModel) {
ngModel.$parsers.push(validate);
ngModel.$render = function() {
validate(ngModel.$viewValue);
};
scope.formattedDate = function(formattedValue) {
if (angular.isDefined(formattedValue)) {
ngModel.$setViewValue(formattedValue);
if (scope.snChange) scope.snChange({
newValue: formattedValue
});
}
return ngModel.$viewValue;
};
} else {
scope.formattedDate = function(formattedValue) {
if (angular.isDefined(formattedValue)) {
scope.field.value = validate(formattedValue);
if (scope.snChange) scope.snChange({
newValue: formattedValue
});
}
return scope.field.value;
};
scope.$watch('field.value', function(newValue, oldValue) {
if (newValue != oldValue)
validate(newValue);
});
}
scope.$on('$destroy', function() {
dp.off('dp.change', onDpChange);
});
}
};
}
What do I have to modify in the code above in order for my AngularJS Material template to work without any errors?

Answer 1

you can use this jquery plugin instead of Bootstrap, it's very compatible with Angular
https://jqueryui.com/datepicker/
I recommend it as i always use it on my Angular projects.
Check out the documentation here and how to use:
http://api.jqueryui.com/datepicker/