AngularJS Datetime format filter in controller

AngularJS Datetime format filter in controller

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For AngularJS Datetime format filter in controller

Syntax of Date Filter in AngularJS

{{yourdateexpression | date : format}}

Convert JSON date to JavaScript date in angularjs

Return json

//input - "DocDate":"\/Date(1127318400000-0000)\/"

HTML part

<tr>
	<td>{{user.DocDate | Datefjson}}</td>
</tr>

script.js

app.filter('Datefjson', ['$filter', function ($filter) {
    return function (input, format) {
        return (input) 
               ? $filter('date')(parseInt(input.substr(6)), format) 
               : '';
    };
 }]);
 

app.filter("dateFilter", function ($filter) {
return function (item) {
    if (item != null) {
        var dateparse = new Date(parseInt(item.substr(6)));
		//return like format 'yyyy-MM-dd'
        return $filter('date')(dateparse, 'yyyy-MM-dd');
    }
    return "";
};
});
 

AngularJS Datetime format in view and controller

    <title>AngularJS Datetime format in view and controller</title>


    <a href="http://angular.min.js">http://angular.min.js</a>
    
        var app = angular.module('infinityknow', [])
        app.controller('dfilterCtrl', function ($scope) {
            $scope.todayDate = new Date();
        });
    
    <div>
        <u>dd/MM/yyyy format</u><br /><span>{{todayDate | date:'dd/MM/yyyy'}}</span>
        <hr />
        <u>dd, MMMM yyyy format</u><br /><span>{{todayDate | date:'dd, MMMM yyyy'}}</span>
        <hr />
        <u>24 Hour time</u><br /><span>{{todayDate | date:'HH:mm:ss'}}</span>
        <hr />
        <u>12 Hour time</u><br /><span>{{todayDate | date:'hh:mm:ss a'}}</span>
    </div>



 

Convert JSON date to JavaScript date in angular

syntax
-------
angular.module('Dateinfinityknow', [])
  .controller('DatefjsonController', ['$scope', function($scope) {
    $scope.datajsonsamole = '\/Date(1433913313004-0800)\/';
  }]);
  
Example
-------
  angular.module('Dateinfinityknow', [])
  .filter('Datefjson', ['$filter', function ($filter) {
    return function (input, format) {
        return (input) 
               ? $filter('date')(parseInt(input.substr(6)), format) 
               : '';
    };
 }]);

Angular JSON Date Converter Filter Example steps By Steps

  <title>Angular JSON Date Converter Filter Example steps By Steps</title>
  
  <a href="http://script.js">http://script.js</a>


  <h2>Angular JSON Date Converter Filter Example</h2>
  <div>
    <div>
      Simple Original Data value JSON Date : 
	  <pre>
	  {{datajsonsamole}}
	  </pre>
    </div>
    <h3>AngularJS dates in different formats :</h3>
    <div>{{ datajsonsamole | Datefjson }}</div>
    <div>{{ datajsonsamole | Datefjson : 'yyyy-MM-dd' }}</div>
    <div>{{ datajsonsamole | Datefjson :'medium' }}</div>
    <div>
      {{ datajsonsamole | Datefjson : 'yyyy-MM-dd HH:mm:ss Z' }}
    </div>
  </div>

Example