The date filter in AngularJS is used to format date and time values dynamically in a user-friendly manner. It allows developers to customize date displays based on predefined formats or custom patterns.
1. Syntax of the Date Filter
The date filter is applied in AngularJS templates using the pipe (|) symbol.
{{ dateValue | date: format }}
dateValue: The date to be formatted.format: (Optional) The format in which the date should be displayed.
2. Basic Usage of the Date Filter
Example: Default Date Format
<p>{{ '2025-03-27T10:30:00' | date }}</p>
Output:
Mar 27, 2025
If no format is provided, AngularJS uses "MMM d, y" as the default format.
3. Predefined Date Formats
AngularJS provides several built-in date format options.
| Format | Output Example |
|---|---|
"short" | 3/27/25, 10:30 AM |
"medium" | Mar 27, 2025, 10:30:00 AM |
"long" | March 27, 2025 at 10:30:00 AM GMT+0530 |
"fullDate" | Thursday, March 27, 2025 |
"shortDate" | 3/27/25 |
"mediumDate" | Mar 27, 2025 |
"longDate" | March 27, 2025 |
"shortTime" | 10:30 AM |
"mediumTime" | 10:30:00 AM |
"longTime" | 10:30:00 AM GMT+0530 |
Example: Using Predefined Formats
<p>Short: {{ '2025-03-27T10:30:00' | date:'short' }}</p>
<p>Medium: {{ '2025-03-27T10:30:00' | date:'medium' }}</p>
<p>Full Date: {{ '2025-03-27T10:30:00' | date:'fullDate' }}</p>
Output:
yamlCopyEditShort: 3/27/25, 10:30 AM
Medium: Mar 27, 2025, 10:30:00 AM
Full Date: Thursday, March 27, 2025
4. Custom Date Formats
You can create custom date formats using format patterns.
| Symbol | Meaning | Example |
|---|---|---|
y | Year | 2025 (yy → 25) |
M | Month (1-12) | 3 (MM → 03, MMM → Mar, MMMM → March) |
d | Day (1-31) | 27 (dd → 27) |
h | Hour (1-12) | 10 |
H | Hour (0-23) | 22 |
m | Minutes (0-59) | 30 |
s | Seconds (0-59) | 00 |
a | AM/PM | AM |
Z | Timezone | GMT+0530 |
Example: Custom Date Formats
<p>Custom 1: {{ '2025-03-27T10:30:00' | date:'dd-MM-yyyy' }}</p>
<p>Custom 2: {{ '2025-03-27T10:30:00' | date:'EEEE, MMM d, y - h:mm a' }}</p>
Output:
Custom 1: 27-03-2025
Custom 2: Thursday, Mar 27, 2025 - 10:30 AM
5. Using the Date Filter in a Controller
You can also use the date filter inside an AngularJS controller with the $filter service.
Example: Formatting in a Controller
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope, $filter) {
var currentDate = new Date();
$scope.formattedDate = $filter('date')(currentDate, 'MMMM d, y - h:mm a');
});
Displaying in HTML
<p>Formatted Date: {{ formattedDate }}</p>
Output:
Formatted Date: March 27, 2025 - 10:30 AM
The $filter('date') function converts the date object into a formatted string.
6. Handling Edge Cases
Handling Invalid Dates
If the input is invalid, AngularJS returns an empty string.
<p>{{ "invalid-date" | date }}</p>
Output:
(empty output)
Handling Null or Undefined Values
<p>{{ undefined | date }}</p>
<p>{{ null | date }}</p>
Output:
(empty output)
(empty output)
Converting Timestamps
You can directly pass timestamps.
<p>{{ 1711518600000 | date:'medium' }}</p>
Output:
Mar 27, 2025, 10:30:00 AM
7. Performance Considerations
Avoid Using Filters Inside ng-repeat
<li ng-repeat="date in dates">
{{ date | date:'shortDate' }}
</li>
Problem:
Each digest cycle, AngularJS re-applies the filter, affecting performance.
Optimize by Precomputing Formatted Dates
$scope.formattedDates = dates.map(d => $filter('date')(d, 'shortDate'));
<li ng-repeat="date in formattedDates">
{{ date }}
</li>
Improvement:
Pre-formatting values reduces unnecessary processing.