I am working on getting a jQuery UI date picker to work inside of an AngularJS 1.3 directive. So far I have been able to get the date picker to render on the screen, and for the selected value to be displayed within the text box. However, I am not able to pass the selected value back to the parent controller for use within in the application.
Here is my directive code.
angular.module("demo", []).directive('myDatepicker', function ($parse) {
return {
restrict: "E",
replace: true,
transclude: false,
compile: function (element, attrs) {
var modelAccessor = $parse(attrs.ngModel);
var html = "<input type='text' id='" + attrs.id + "' >" +
"</input>";
var newElem = $(html);
element.replaceWith(newElem);
return function (scope, element, attrs, controller) {
var processChange = function () {
var date = new Date(element.datepicker("getDate"));
scope.$apply(function (scope) {
// Change bound variable
modelAccessor.assign(scope, date);
});
};
element.datepicker({
inline: true,
onClose: processChange,
onSelect: processChange
});
scope.$watch(modelAccessor, function (val) {
var date = new Date(val);
element.datepicker("setDate", date);
});
};
}
}; });
