Can't display date from server in ui-grid columnDef header with angularFire

Question

I started working with ui-grid version 3 a couple of weeks ago and was able to successfully bring firebase data objects in my grid. Now, I'd like to display the date from the server every time a form entry is submitted, even though the date field is not a field in the form, I will need to show it on the grid to have a date reference for every successful submission.

In my controller I've changed code to better reflect question:

var timeRef = new Firebase('https://xxc16.firebaseio.com/calls');

timeRef.set('time')
.set(Firebase.ServerValue.TIMESTAMP)
.on("value", function(snapshot){
     var currentServerTime = snapshot.val();
     console.log('The server time set for this call is:'+currentServerTime);
});

$scope.gridOptions = {
    columnDefs: [
        {name:'Created On', field: 'createdOn', width:120,cellTemplate:"<div class='ui-grid-cell-contents'> {{3+3}} -{{grid.appScope.createdOn | date:'MM/dd/yy h:mm:ss a'}}</div>"},
        {name:'firstname', field: 'firstname'},
        {name:'lastname', field: 'lastname'},...

I have:

• firebase.js 2.3.1
  • angularfire.min.js 1.1.3

data structure:

Answer 1

Firebase.ServerValue.TIMESTAMP is a placeholder that is used at the server to generate a server-based timestamp. It is not a JavaScript Date object. Thus, you cannot use it as a Date object. A read of the API docs for TIMESTAMP should make this clear.

Locally, you should simply use new Date() or Date.now().

$scope.calldate = new Date();

If you really want to confuse your users by showing them the server time instead of their local time, check out .info/serverTimeOffset in offline capabilities. (hint: you don't want to do that)

Note that when setting the timestamp on data that is saved to the server, using Firebase.ServerValue.TIMESTAMP is very appropriate.

Also see this fiddle for an example of manipulating date epochs into local Date objects.

Answer 2

To bind a value to a cell template in ui-grid, its better to go with appScopeProviver.

You can define the appScopeProvider in your ui-grid configuration object as follows,

appScopeProvider: {}

now any value exposed on appScopeProvider can be accessed inside the templates using grid.appScope.yourVariableName

So in your case, you need to expose your value on appScopeProvider as follows,

appScopeProvider {
  createdOn: $scope.createdOn
 }

Now you can access the same in your template as follows,

cellTemplate:"<div class='ui-grid-cell-contents'>{{grid.appScope.createdOn | date:'MM/dd/yy h:mm:ss a'}}</div>"

Your value will be bound to your template.

However, if your values will change per row, instead of property you can define a function which can return the date.

For e.g

appScopeProvider: {
  getCreatedOn: function() {
     // your logic here to get the created on date.
     // return your value.
  }
}

Below I have provided a sample snippet where I am creating new column (created date) and binding my value present on $scope.createdOn defined in controller.

var app = angular.module("myapp", ["ui.grid"]);

app.controller("uiGridCntrl", ["$scope", function($scope){
  $scope.myData = [{name: "Moroni", city: "Washington"},
	                 {name: "Tiancum", city: "NY"},
	                 {name: "Jacob", city: "LA"}];
  
  
  $scope.createdOn = new Date();
  
  $scope.gridData = {
    data: 'myData',
    columnDefs: [
      {field: 'name', displayName: 'Name'},
      {field: 'city', displayName: 'City'},
      {field: 'Created On', displayName: 'Created Date', cellTemplate:"<div class='ui-grid-cell-contents'>{{grid.appScope.createdOn | date:'MM/dd/yy h:mm:ss a'}}</div>"}
    ],
    
    appScopeProvider: {
      'createdOn': $scope.createdOn
    }
       
  }
                   
                   
}]);

.ui-grid-style {
  height: 400px;
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>

<div ng-app="myapp">
  <div ng-controller="uiGridCntrl">
  <div class="ui-grid-style" ui-grid="gridData"></div>
    </div>
 </div>