I have made a directive by using jquery ui datepicker is following code
app.directive('jqdatepicker', ['$parse', '$filter', function ($parse, $filter) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
//Used to parse date format
function formatter(value) {
if (value) {
return jQuery.datepicker.formatDate(options.dateFormat, value);
}
return null;
}
//Used to parse date format
function parseDate(value) {
if (angular.isString(value)) {
return jQuery.datepicker.parseDate(options.dateFormat, value);
}
return null;
}
//select date
var updateModel = function (dateText) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
//date picker options
var options = {
dateFormat: "dd/mm/yy",
onSelect: function (dateText) {
updateModel(dateText);
}
};
//parsing
ngModelCtrl.$formatters.push(formatter);
ngModelCtrl.$parsers.unshift(parseDate);
// If we don't destroy the old one it doesn't update properly when the config changes
element.datepicker('destroy');
//bind datepicker
element.datepicker(options);
// Force a render to override whatever is in the input text box
//ngModelCtrl.$render();
}
};
}]);
Use of directive
<input ng-if="VM_Volunteer.isEdit" type="text" jqdatepicker class="form-control" ng-model="VM_Volunteer.dateOfBirth">
When i select date, the date is setting to my textbox, it has no problem, but after save this date to my database, then i am getting this date and want to show into this textbox, but date is not showing. When i getting this date, the it is formate date. What is the problem of me.