InfoHeap
Tech tutorials, tips, tools and more
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. Linux – Yesterday’s Date in YYYYMMDD format
  2. AngularJS controller basic clock example
  3. AngularJS ng-init
  4. AngularJS – implement tabs using ng-switch
  5. Some handy linux gnu date commands
  6. AngularJS ng-bind-template example
  7. AngularJS – include url template
  8. How to display date in wordpress pages
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged AngularJS, Javascript, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | 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

Copyright © 2022 InfoHeap.

Powered by WordPress