In AngularJS, the date filter is used to format date values in a readable format. It allows customization of the output based on various formats such as short date, long date, and custom formats.
Supports default and custom formats
Works with timestamps and JavaScript Date objects
Can be used with ng-model, controllers, and filters
1. Basic Syntax of date Filter
{{ dateValue | date }}
By default, it formats the date in “MMM d, y” format (e.g., Mar 25, 2025).
2. Using date Filter with Static Values
<p>Default Format: {{ '2025-03-25T12:00:00Z' | date }}</p>
<p>Custom Format: {{ '2025-03-25T12:00:00Z' | date:'fullDate' }}</p>
Output:
Default Format: Mar 25, 2025
Custom Format: Tuesday, March 25, 2025
3. Using date Filter with Scope Variables
Example: Formatting a Date from Controller
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="DateController">
<h2>Formatted Dates</h2>
<p>Default Format: {{ today | date }}</p>
<p>Short Date: {{ today | date:'shortDate' }}</p>
<p>Medium Date: {{ today | date:'mediumDate' }}</p>
<p>Long Date: {{ today | date:'longDate' }}</p>
<p>Full Date: {{ today | date:'fullDate' }}</p>
<p>Time Only: {{ today | date:'HH:mm:ss' }}</p>
<script>
var app = angular.module('myApp', []);
app.controller('DateController', function($scope) {
$scope.today = new Date();
});
</script>
</body>
</html>
Output (Assuming March 25, 2025, at 14:30:00):
Default Format: Mar 25, 2025
Short Date: 3/25/25
Medium Date: Mar 25, 2025
Long Date: March 25, 2025
Full Date: Tuesday, March 25, 2025
Time Only: 14:30:00
4. Custom Date Formatting Patterns
You can customize date formats using specific patterns:
| Format String | Description | Example Output |
|---|---|---|
yyyy | Full Year | 2025 |
yy | Short Year | 25 |
MMMM | Full Month Name | March |
MMM | Short Month Name | Mar |
MM | Month (2-digit) | 03 |
dd | Day (2-digit) | 25 |
EEE | Short Day Name | Tue |
EEEE | Full Day Name | Tuesday |
hh | Hours (12-hour format) | 02 |
HH | Hours (24-hour format) | 14 |
mm | Minutes | 30 |
ss | Seconds | 45 |
a | AM/PM | PM |
Example: Custom Date Formatting
<p>Custom Format: {{ today | date:'EEEE, MMMM dd, yyyy - HH:mm:ss a' }}</p>
Output:
Tuesday, March 25, 2025 - 14:30:00 PM
5. Using date Filter with ng-model (User Input)
You can dynamically format dates based on user input.
Example: Date Input Field
<label>Select a Date: </label>
<input type="date" ng-model="selectedDate">
<p>Formatted Date: {{ selectedDate | date:'fullDate' }}</p>
When a user selects a date, it will be formatted as Tuesday, March 25, 2025.
6. Using date Filter in ng-repeat (Lists & Tables)
The date filter can format dates dynamically inside ng-repeat.
Example: Formatting Dates in a List
<table border="1">
<tr>
<th>Event</th>
<th>Date</th>
</tr>
<tr ng-repeat="event in events">
<td>{{ event.name }}</td>
<td>{{ event.date | date:'medium' }}</td>
</tr>
</table>
app.controller('EventController', function($scope) {
$scope.events = [
{ name: "Conference", date: new Date(2025, 2, 25) },
{ name: "Workshop", date: new Date(2025, 6, 10) },
{ name: "Webinar", date: new Date(2025, 10, 5) }
];
});
Output:
| Event | Date |
|---|---|
| Conference | Mar 25, 2025 |
| Workshop | Jul 10, 2025 |
| Webinar | Nov 5, 2025 |
7. Using $filter Service in Controller
If you need to format a date inside a controller, you can use the $filter service.
Example: Formatting Date in Controller
app.controller('DateController', function($scope, $filter) {
var today = new Date();
$scope.formattedDate = $filter('date')(today, "EEEE, MMMM dd, yyyy - hh:mm a");
});
Output (in view):
Tuesday, March 25, 2025 - 02:30 PM
8. Using date Filter in Directives
If you’re using custom directives, you can apply the date filter inside the template.
Example: Custom Date Display Directive
app.directive('eventDate', function() {
return {
template: "<p>Event Date: {{ eventDate | date:'fullDate' }}</p>",
scope: { eventDate: '=' }
};
});
<event-date event-date="eventDate"></event-date>
This displays the event date in Tuesday, March 25, 2025 format.