angularJs directive to format date
15,431
Solution 1
Angular.js already have date filter {{20140314 | date}} // Jan 1, 1970 9:35:40 AM
Solution 2
This works for me,
.directive('myDate', ['$timeout', '$filter', function ($timeout, $filter)
{
return {
require: 'ngModel',
link: function ($scope, $element, $attrs, $ctrl)
{
var dateFormat = 'mm/dd/yyyy';
$ctrl.$parsers.push(function (viewValue)
{
//convert string input into moment data model
var pDate = Date.parse(viewValue);
if (isNaN(pDate) === false) {
return new Date(pDate);
}
return undefined;
});
$ctrl.$formatters.push(function (modelValue)
{
var pDate = Date.parse(modelValue);
if (isNaN(pDate) === false) {
return $filter('date')(new Date(pDate), dateFormat);
}
return undefined;
});
$element.on('blur', function ()
{
var pDate = Date.parse($ctrl.$modelValue);
if (isNaN(pDate) === true) {
$ctrl.$setViewValue(null);
$ctrl.$render();
} else {
if ($element.val() !== $filter('date')(new Date(pDate), dateFormat)) {
$ctrl.$setViewValue($filter('date')(new Date(pDate), dateFormat));
$ctrl.$render();
}
}
});
$timeout(function ()
{
$element.kendoDatePicker({
format: dateFormat
});
});
}
};
}])
Author by
user3421352
Updated on June 14, 2022Comments
-
user3421352 almost 2 years
I want to have a functionality in angular which help to enter date and show it in proper format and don't allow invalid values in it. also able to show server returned '20140314T00:00:00Z' json string for date.
Can anyone help me ?
-
user3421352 about 10 yearsi have date value in ng-model and this gives me error.
-
user3421352 about 10 yearsI want something like this which do not allow alphabets. github.com/IgorMinar/directives-workshop/blob/master/src/…