Date-Time Demo

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by dmitri14

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="init();">
    <div ng-repeat="date in dates" class="dateformatter">

<span><strong>Date</strong> : {{ date.date1 }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat1 }}</span>
<span><strong>Time Format</strong> : {{ date.date1 | time }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime1 }}</span>
        
    </div>
    </div>
</div>

CSS

.dateformatter{
    padding:10px;
}
.dateformatter span{
    color:#000 ;
    display:block;
    margin:5px 0px;
}
strong{
    width:200px;
    display:inline-block;
}

JavaScript

var myapp = angular.module('sampleapp', [ ]);

myapp.controller('samplecontoller', function ($scope ,$interval ) {
   
    $scope.init = $interval(function(){

    var date = new Date();
    $scope.dates = [{ "date1" : date }]
    
     },100 )

});
myapp.filter('dateFormat', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input), 'MMM dd yyyy');
 
  return _date.toUpperCase();

 };
});
myapp.filter('dateFormat1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input), 'MM dd yyyy');
 
  return _date.toUpperCase();

 };
});

myapp.filter('time', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input), 'HH:mm:ss');
 
  return _date.toUpperCase();

 };
});
myapp.filter('datetime', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input),
                              'MMM dd yyyy - HH:mm:ss');
 
  return _date.toUpperCase();

 };
});
myapp.filter('datetime1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input),
                              'MM dd yyyy - HH:mm:ss');
 
  return _date.toUpperCase();

 };
});