InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

AngularJS

  • Hello world
  • ng-init
  • ng-model
  • Controller to increment value
  • Controller - basic clock
  • Controller - ajax
  • date filter
  • include template (url)
  • include template (inline)
  • tabs using ng-switch
  • conditional style using ng-style
  • animation with ng-class
  • ng-if vs ng-hide/ng-show

AngularJS Directives

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-blur
  • ng-change
  • ng-checked
  • ng-class
  • ng-class-even and ng-class-odd
  • ng-click
  • ng-cloak
  • ng-dblclick
  • ng-disabled
  • ng-focus
  • ng-hide
  • ng-href
  • ng-if
  • ng-list
 
  • Home
  • > Tutorials
  • > Javascript
  • > AngularJS

AngularJS format date using date filter

on Feb 25, 2016

Angularjs filter can be used in angular js expression using pipe. Here is an example of AngularJS inbuilt filter date to format Javascript Date to some more readable formats.

Usage:

HTML template
{{ date_expression | date : format : timezone}}

Javascript
$filter('date')(date, format, timezone)

date filter example using template

<div ng-app="myApp" ng-controller='MyCtrl'>
  <p>date:yyyy/MM/dd/HH/mm/ss {{dateVal | date:'yyyy/MM/dd/HH/mm/SS' }}</p>
  <p>date:medium - {{dateVal | date:'medium'}}</p>
  <p>date:short - {{dateVal | date:'short' }}</p>
  <p>date:fullDate - {{dateVal | date:'fullDate' }}</p>
  <p>date:longDate - {{dateVal | date:'longDate' }}</p>
  <p>date:mediumDate - {{dateVal | date:'mediumDate' }}</p>
  <p>date:shortDate - {{dateVal | date:'shortDate' }}</p>
  <p>date:mediumTime - {{dateVal | date:'mediumTime' }}</p>
  <p>date:shortTime - {{dateVal | date:'shortTime' }}</p>
  <p>date:mediumTime:UTC - {{dateVal | date:'mediumTime':'UTC' }}</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope) {
  $scope.dateVal = new Date();
});
</script>
refresh done
try it online

date filter example using Javascript

<div ng-app="myApp" ng-controller='MyCtrl'>
  <p>date - {{dateVal}}</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $filter) {
  $scope.dateVal = $filter('date')(new Date(), 'short');
});
</script>
refresh done
try it online

Suggested posts:

  1. Javascript – iterate over function arguments
  2. Jenkins execute shell – how to continue on error
  3. node – how to find version of installed package
  4. php cli – find which ini file is loaded
  5. CSS general sibling selector
  6. AngularJS simple controller tutorial to increment a value
  7. AngularJS – dynamic css using ng-style
  8. AngularJS ng-class-even and ng-class-odd example
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged AngularJS, Javascript, Tutorials
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress