Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
AngularJS and HTML5 date input value - how to get Firefox to show a readable date value in a date input?
The <input> elements of type date allow users to enter dates using a text box or date picker. With the ng-model directive, you can bind AngularJS application data to HTML input controls. However, Firefox has limited support for type="date" and converts values to strings, which can cause display issues.
Since you want the date to be a real Date object and not a string, we need to create additional variables and link them together using watchers.
The Problem
Firefox doesn't fully support HTML5 date inputs and may not display dates in a readable format. The browser treats date values as strings, making it difficult to work with actual Date objects in AngularJS.
Solution: Using $watch to Sync Date Values
Here's how to handle date input synchronization between string and Date object formats:
<input type="date" ng-model="dateString" />
function MainCtrl($scope, $filter) {
$scope.date = new Date();
// Watch the Date object and update the string
$scope.$watch('date', function (date) {
if (date) {
$scope.dateString = $filter('date')(date, 'yyyy-MM-dd');
}
});
// Watch the string and update the Date object
$scope.$watch('dateString', function (dateString) {
if (dateString) {
$scope.date = new Date(dateString);
}
});
}
Complete Example
<!DOCTYPE html>
<html ng-app="dateApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3>Date Input Example</h3>
<label>Select Date:</label>
<input type="date" ng-model="dateString" />
<p>Date Object: {{date}}</p>
<p>Date String: {{dateString}}</p>
<p>Formatted: {{date | date:'fullDate'}}</p>
<script>
angular.module('dateApp', [])
.controller('MainCtrl', function($scope, $filter) {
$scope.date = new Date();
$scope.$watch('date', function (date) {
if (date) {
$scope.dateString = $filter('date')(date, 'yyyy-MM-dd');
}
});
$scope.$watch('dateString', function (dateString) {
if (dateString) {
$scope.date = new Date(dateString);
}
});
});
</script>
</body>
</html>
How It Works
The solution uses two watchers to keep the Date object and string representation synchronized:
- When the Date object changes, it updates the string format for the input
- When the input string changes, it creates a new Date object
- The date filter formats the Date object as 'yyyy-MM-dd' for HTML5 compatibility
Alternative: Using ng-change
<input type="date" ng-model="dateString" ng-change="updateDate()" />
function MainCtrl($scope, $filter) {
$scope.date = new Date();
$scope.dateString = $filter('date')($scope.date, 'yyyy-MM-dd');
$scope.updateDate = function() {
if ($scope.dateString) {
$scope.date = new Date($scope.dateString);
}
};
}
Browser Compatibility
| Browser | Date Input Support | Fallback Needed |
|---|---|---|
| Chrome/Edge | Full | No |
| Firefox | Limited | Yes |
| Safari | Full | No |
Conclusion
Using $watch or ng-change ensures proper synchronization between HTML5 date inputs and AngularJS Date objects. This approach provides cross-browser compatibility and maintains data type consistency in your application.
318 Views
