title: Correct date format in Angular Datatable
body: <p>I have problem with date formating. I have table in my app, when I add something to them the date format isn't correct. Now it look like in screen. I want to format it to YYYY-MM-DD only. Any help, advice?</p>
  
  <p><a href="http://i.stack.imgur.com/7C3nu.png" rel="nofollow">screen from console</a></p>
  
  <p>appManagementProjects.js</p>
  
  <pre><code>(function() {
  'use strict';
  
  angular
      .module('appManagementProjects', [
          'ngMaterial'
      ])
      .controller('ManagementProjectsCtrl', ManagementProjectsCtrl);
  
  function ManagementProjectsCtrl(serviceManagementDataTable, serviceManagementProjects, $mdDialog, $mdToast) {
      var vm = this;
      vm.DeletedDataTable = DeletedDataTable;
      vm.SaveDataTable = SaveDataTable;
      vm.SetEditDataTable = SetEditDataTable;
      vm.EditDataTable = EditDataTable;
      vm.Active = Active;
      vm.project = {};
      vm.dataProjects = [];
      vm.dtData = [];
      vm.dtColumns = [
          serviceManagementDataTable.AddColumns('id', 'ID').WithWidth(50).SortingBy('asc'),
          serviceManagementDataTable.AddColumns('name', 'Nazwa'),
          serviceManagementDataTable.AddColumns('action', 'Czynność'),
          serviceManagementDataTable.AddColumns('createdDate', 'Data utworzenia'),
          serviceManagementDataTable.AddColumns('grantedTime', 'Liczba przyznanych godzin'),
          serviceManagementDataTable.AddColumns('usedTime', 'Liczba wykorzystanych godzin')
      ];
      vm.config = {
          totalData: serviceManagementDataTable.SetNoDownloadData(),
          urlAdd: 'scripts/modules/managementProjects/views/addDataProject.html',
          urlEdit: 'scripts/modules/managementProjects/views/editDataProject.html'
      };
  
      Active();
  
      function Active() {
          vm.dtData.startDownload = true;
          console.log("Start DOWNLOAD " + Date());
          /*serviceManagementUsers.DownloadData.query().$promise.then(function(user) {
              vm.dataUsers = user;
              vm.dtData = serviceManagementDataTable.PrepareData(vm.dtColumns, user);
          });*/
          var get = [serviceManagementDataTable.GetCurrentPage().start, serviceManagementDataTable.GetPageSize()];
          serviceManagementProjects.DownloadData.query({
              limit: get.join()
          }).$promise.then(function(data) {
              vm.dataProjects = data;
              vm.dtData = serviceManagementDataTable.PrepareData(vm.dtColumns, data);
              console.log("End DOWNLOAD " + Date());
          });
      }
  
      function DeletedDataTable(currData, removeData) {
          var idDeleted = [];
          angular.forEach(removeData, function(val) {
              idDeleted.push(val.id);
          });
  
          serviceManagementProjects.DownloadData.remove({
              ids: idDeleted.join()
          }).$promise.then(function(project) {
              $mdToast.show(
                  $mdToast.simple()
                  .content('Usunięto ' + (idDeleted.length &gt; 1 ? 'projektów' : 'projekt') + '.')
                  .position("right top")
                  .hideDelay(3000)
              );
          }, function(reason) {
              $mdToast.show(
                  $mdToast.simple()
                  .content('Wystąpił błąd podczas usuwania ' + (idDeleted.length &gt; 1 ? 'projektów' : 'projektu') + '.')
                  .position("left top")
                  .hideDelay(3000)
              );
          });
      }
  
      function SaveDataTable(data) {
          serviceManagementProjects.DownloadData.save(data).$promise.then(function(project) {
              data.id = project.id;
              vm.dataProjects.push(data);
              vm.dtData = serviceManagementDataTable.PrepareData(vm.dtColumns, vm.dataProjects);
              $mdToast.show(
                  $mdToast.simple()
                  .content('Dodano projekt.')
                  .position("right top")
                  .hideDelay(3000)
              );
          }, function(reason) {
              $mdToast.show(
                  $mdToast.simple()
                  .content('Wystąpił błąd podczas dodawania projektu.')
                  .position("left top")
                  .hideDelay(3000)
              );
          });
      }
  
      function SetEditDataTable(event) {
          vm.project = vm.dataProjects[event.ids];
          return vm.project;
      }
  
      function EditDataTable(key, ret) {
          vm.dataProjects[key] = ret;
          vm.dtData = serviceManagementDataTable.PrepareData(vm.dtColumns, vm.dataProjects);
  
          serviceManagementProjects.DownloadData.update(serviceManagementDataTable.PrepareAjaxData(vm.dtData)).$promise.then(function(project) {
              $mdToast.show(
                  $mdToast.simple()
                  .content('Edytowano informacje o projekcie.')
                  .position("right top")
                  .hideDelay(3000)
              );
          }, function(reason) {
              $mdToast.show(
                  $mdToast.simple()
                  .content('Wystąpił błąd podczas edytowania informacji o projekcie.')
                  .position("left top")
                  .hideDelay(3000)
              );
          });
      }
  }
  })();
  </code></pre>
  
  <p>serviceManagementProjects.js</p>
  
  <pre><code>(function() {
  'use strict';
  
  angular
      .module('appManagementProjects')
      .factory('serviceManagementProjects', ServiceManagementProjects);
  
  function ServiceManagementProjects($resource) {
      var data = [];
      var DownloadData = $resource('http://**********/api/projects', null, {
          'update': {
              method: 'PUT'
          }
      });
      var self = {
          firstDownload: false
      };
      var service = {
          DownloadData: DownloadData,
          SetNoFirstDownload: SetNoFirstDownload,
          IsFirstDownload: IsFirstDownload,
          DeletedProjects: DeletedProjects
      };
      return service;
  
      function DeletedProjects(selected) {
          angular.forEach(data, function(val, key) {
              if (selected.indexOf(val.ids) !== -1) {
                  data.splice(key, 1);
              }
          });
      }
  
      function SetNoFirstDownload() {
          self.firstDownload = true;
      }
  
      function IsFirstDownload() {
          return !self.firstDownload;
      }
  }
  })();
  </code></pre>
  
  <p>addDataProject.html</p>
  
  <pre><code>&lt;md-dialog class="md-default-theme addProjectForm"&gt;
  &lt;md-dialog-content&gt;
      &lt;h2 class="md-title"&gt;Dodawanie projektu&lt;/h2&gt;
      &lt;form name="addProject" onclick="return false;"&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.name" type="text" name="name" placeholder="Nazwa projektu" ng-required="true"&gt;
              &lt;div ng-messages="addProject.name.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.action" type="text" name="action" placeholder="Czynność" ng-required="false"&gt;
              &lt;div ng-messages="addProject.action.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.createddate" type="date" name="createdate" placeholder="Data utworzenia" ng-required="true"&gt;
              &lt;div ng-messages="addProject.createddate.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.grantedtime" type="text" name="grantedtime" placeholder="Liczba przyznanych godzin" ng-required="true"&gt;
              &lt;div ng-messages="addProject.grantedtime.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.usedtime" type="text" name="usedtime" placeholder="Liczba wykorzystanych godzin" ng-required="false"&gt;
              &lt;div ng-messages="addProject.usedtime.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
      &lt;/form&gt;
  &lt;/md-dialog-content&gt;
  &lt;div class="md-actions"&gt;
      &lt;md-button type="button" ng-click="ctrl.vm.CancelDialog()"&gt;Anuluj&lt;/md-button&gt;
      &lt;md-button class="md-primary" aria-label="{{ctrl.vm.dialogConfig.confirm}}" type="submit" ng-click="ctrl.vm.HideDialog()" ng-disabled="editProject.$invalid" ng-bind="ctrl.vm.dialogConfig.confirm"&gt;&lt;/md-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>editDataProject.html</p>
  
  <pre><code>&lt;md-dialog class="md-default-theme addProjectForm"&gt;
  &lt;md-dialog-content&gt;
      &lt;h2 class="md-title"&gt;Edytowanie projektu&lt;/h2&gt;
      &lt;form name="editProject" onclick="return false;"&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.name" type="text" name="name" placeholder="Nazwa projektu" ng-required="true"&gt;
              &lt;div ng-messages="addProject.name.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.action" type="text" name="action" placeholder="Czynność" ng-required="false"&gt;
              &lt;div ng-messages="addProject.action.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.createdDate" type="date" name="createddate" placeholder="Data utworzenia" ng-required="true"&gt;
              &lt;div ng-messages="addProject.createdDate.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container&gt;
              &lt;input ng-model="ctrl.vm.dialogData.grantedTime" type="text" name="grantedtime" placeholder="Liczba przyznanych godzin" ng-required="true"&gt;
              &lt;div ng-messages="addProject.grantedTime.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
          &lt;md-input-container flex&gt;
              &lt;input ng-model="ctrl.vm.dialogData.usedTime" type="text" name="usedtime" placeholder="Liczba wykorzystanych godzin" ng-required="false"&gt;
              &lt;div ng-messages="addProject.usedTime.$error"&gt;
                  &lt;div ng-message="required"&gt;To pole jest obowiązkowe.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-input-container&gt;
      &lt;/form&gt;
  &lt;/md-dialog-content&gt;
  &lt;div class="md-actions"&gt;
      &lt;md-button type="button" ng-click="ctrl.vm.CancelDialog()"&gt;Anuluj&lt;/md-button&gt;
      &lt;md-button class="md-primary" aria-label="{{ctrl.vm.dialogConfig.confirm}}" type="submit" ng-click="ctrl.vm.HideDialog()" ng-disabled="editProject.$invalid" ng-bind="ctrl.vm.dialogConfig.confirm"&gt;&lt;/md-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>managementProjects.html</p>
  
  <pre><code>&lt;div management-data-table datatable="managementProjects.dtData" columnstable="managementProjects.dtColumns" config="managementProjects.config"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>datatable directibe</p>
  
  <pre><code>(function() {
  'use strict';
  
  angular
      .module('appManagementDataTable')
      .directive('managementDataTable', ManagementDataTable);
  
  function ManagementDataTable($mdDialog) {
      return {
          restrice: 'A',
          scope: {
              datatable: '=',
              columnstable: '=',
              config: '=',
              managementDataTable: '@'
          },
          templateUrl: 'scripts/modules/datatable/views/dataTable.html',
          controller: 'ManagementDataTableCtrl',
          controllerAs: 'managementDT',
          link: function($scope, $element, $attr, $controller) {
              var controller = $element.parent().controller();
  
              $scope.selected = [];
              $scope.showProgress = true;
              $scope.toggleAllOn = false;
  
              function toggleAllOff() {
                  $scope.toggleAllOn = false;
                  $scope.selected = [];
                  $controller.SetSelected(0, $scope.selected);
              }
  
              $scope.totalLength = $scope.datatable.totalLength;
  
              $scope.GetData = function() {
                  if ($scope.config.totalData === true)
                      return false;
                  else 
                      return true;
              }
  
              $scope.DeletedData = function() {
                  var old = $scope.datatable;
                  var returnData = [];
                  var removeData = [];
                  $scope.datatable = [];
                  angular.forEach(old, function(val, key) {
                      if ($scope.selected.indexOf(val.ids) == -1) {
                          $scope.datatable.push(val);
                          delete val.ids;
                          delete val.values;
                          returnData.push(val);
                      } else {
                          delete val.ids;
                          delete val.values;
                          removeData.push(val);
                      }
                  });
  
                  toggleAllOff();
  
                  if (controller.DeletedDataTable !== undefined) {
                      controller.DeletedDataTable(returnData, $controller.PrepareAjaxData(removeData));
                  } else console.log("Error: DeletedDataTable is undefined");
              }
  
              $scope.AddData = function(ev) {
                  $scope.dialogConfig = {
                      typ: 'add',
                      confirm: 'Dodaj'
                  };
                  if ($scope.config.urlAdd === undefined) {
                      console.log("Error: urlAdd in config is undefined");
                  } else {
                      $scope.dialogData = {};
                      $mdDialog.show({
                              templateUrl: $scope.config.urlAdd,
                              parent: angular.element(document.body),
                              targetEvent: ev,
                              controller: function() {
                                  this.vm = $scope;
                              },
                              controllerAs: 'ctrl'
                          })
                          .then(function(ret) {
                              if (controller.SaveDataTable !== undefined) {
                                  controller.SaveDataTable(ret);
                              } else console.log("Error: SaveDataTable is undefined");
                          }, function() {});
                  }
              }
  
              $scope.EditData = function(key, ev) {
                  $scope.dialogConfig = {
                      typ: 'edit',
                      confirm: 'Edytuj'
                  };
                  if ($scope.config.urlEdit === undefined) {
                      console.log("Error: urlEdit in config is undefined");
                  } else if (controller.SetEditDataTable !== undefined) {
                      var dat = controller.SetEditDataTable($scope.datatable[key]);
                      $scope.dialogData = dat;
                      $mdDialog.show({
                              templateUrl: $scope.config.urlEdit,
                              parent: angular.element(document.body),
                              targetEvent: ev,
                              controller: function() {
                                  this.vm = $scope;
                              },
                              controllerAs: 'ctrl'
                          })
                          .then(function(ret) {
                              if (controller.EditDataTable !== undefined) {
                                  controller.EditDataTable(key, ret);
                              } else console.log("Error: EditDataTable is undefined");
                          }, function() {});
                  } else console.log("Error: SetEditDataTable is undefined");
              }
  
              $scope.HideDialog = function() {
                  $mdDialog.hide($scope.dialogData);
              }
  
              $scope.CancelDialog = function() {
                  $mdDialog.cancel();
              }
  
              $scope.GetColumnCount = function() {
                  return $scope.columnstable.length + 2;
              }
  
              $scope.SetPageSize = function(val) {
                  $controller.SetPageSize(val);
  
              }
  
              $scope.ToggleRow = function(keyRow) {
                  if ($scope.selected.indexOf(keyRow) === -1)
                      $scope.selected.push(keyRow);
                  else
                      $scope.selected.splice($scope.selected.indexOf(keyRow), 1);
  
                  $controller.SetSelected(0, $scope.selected);
  
                  angular.forEach($scope.datatable, function(val, key) {
                      if (val.ids == keyRow) {
                          $scope.datatable[key].checked = !$scope.datatable[key].checked;
                      }
                  });
              }
  
              $scope.ToggleAll = function(data) {
                  $scope.toggleAllOn = !$scope.toggleAllOn;
                  var ids = [];
                  $scope.selected = [];
                  angular.forEach(data, function(val, key) {
                      ids.push(val.ids);
                      if ($scope.toggleAllOn)
                          $scope.selected.push(val.ids);
                  });
  
                  $controller.SetSelected(0, $scope.selected);
  
                  angular.forEach($scope.datatable, function(val, key) {
                      if (ids.indexOf(val.ids) !== -1)
                          $scope.datatable[key].checked = $scope.toggleAllOn;
                  });
              }
  
              $scope.SortingBy = function(key, sortable) {
                  $controller.SetSorting(key, sortable);
              }
  
              $scope.GetSorting = function(key, sortable) {
                  return $controller.IsSorting(key, sortable);
              }
  
              $scope.GetPageSize = function() {
                  return $controller.GetPageSize();
              }
  
              $scope.GetCurrentPage = function() {
                  return $controller.GetCurrentPage().currPage;
              }
  
              $scope.GetCurrentPageInformation = function() {
                  var pages = $controller.GetCurrentPage();
                  pages.end = pages.start + $controller.GetPageSize();
                  pages.start += 1;
  
                  return pages;
              }
  
              $scope.GetLastPage = function() {
                  var totalLength = $scope.totalLength;
                  var pageSize = $controller.GetPageSize();
  
                  return Math.ceil(totalLength / pageSize);
              }
  
              $scope.SetCurrentPage = function(val) {
                  $controller.SetCurrentPage(val);
                  toggleAllOff();
                  /*angular.forEach($scope.datatable, function(val, key) {
                      $scope.datatable[key].checked = false;
                  });*/
                  /** ADD */
                  if (controller.Active !== undefined) {
                      controller.Active();
                  } else console.log("Error: Active is undefined");
                  /** END ADD */
              }
  
              $scope.Pages = function(totalLength) {
                  //$scope.totalLength = totalLength;
                  /** ADD */
                  $scope.totalLength = $scope.datatable.totalLength;
                  /** END ADD */
                  var pageSize = $controller.GetPageSize();
                  var totalPages = Math.ceil($scope.totalLength / pageSize);
                  var currPage = $controller.GetCurrentPage().currPage;
                  currPage = currPage &gt; totalPages ? totalPages : currPage;
                  $controller.SetCurrentPage(currPage);
  
                  var pages = [];
                  if (totalPages &lt; 8) {
                      for (var i = 1; i &lt;= totalPages; i++) {
                          pages.push(i);
                      }
                  } else {
                      if (totalPages &lt; 6) {
                          for (var i = 1; i &lt;= totalPages; i++) {
                              pages.push(i);
                          }
                      } else if (currPage &lt;= 5) {
                          for (var i = 1; i &lt;= 7; i++) {
                              pages.push(i);
                          }
                          pages.push('...');
                          pages.push(totalPages);
                      } else if (currPage &gt; 5 &amp;&amp; currPage + 3 &lt; totalPages) {
                          pages.push(1);
                          pages.push('...');
                          for (var i = (currPage - 2); i &lt;= (currPage + 2); i++) {
                              pages.push(i);
                          }
                          pages.push('...');
                          pages.push(totalPages);
                      } else {
                          pages.push(1);
                          pages.push('...');
                          var j = totalPages - currPage;
                          var k = 6 - j;
  
                          for (var i = (currPage - k); i &lt;= totalPages; i++) {
                              pages.push(i);
                          }
                      }
                  }
                  return pages;
              }
          }
      }
  }
  })();
  </code></pre>