how to use converter object's value in angularjs controllers

Question

i have below controller in my angularjs controllers

.controller('taskCtrl', ['$scope', function ($scope) {
    $scope.getRef = function () {
       return getTask();
    };

    $scope.save = function () {
          $.extend(true, getTask(), $scope.data);
    };
}])

and my template :

<tr>
  <td>
    <label class="ngTemplateTitle" > create Date</label>
  </td>
  <td>
    <input class="form-control" id="data.creationDate" type="text"ng-model="data.creationDate"/>
  </td>
</tr>

i need to convert and view gregorian date to hijri in form. then after object's value modified by user convert hijri to gregorian date.

Answer 1

Are you familiar with moment.js ?

You can import it to your project (very light file), and implement an angular filter for parsing it the way you want...

something like:

angular.module('myFilters').filter('formatDateExample', function() {
var defaultFormat = "l";
return function(timestamp, format) {
    format = format || defaultFormat;
    return timestamp ? moment(new Date(timestamp)).format(format) : null;
    // when you'll call the filter from the HTML, it will parse it to gregorian date
};

});

in the html template:

<div>{{myDateVar | formatDateExample }}</div>

or with a custom format directly from the HTML:

<div>{{myDateVar | formatDateExample: "DD/MM/YYYY, HH:MM" }}</div>

The idea is to keep your date saved in the model in the same way and only when you want to show it in your view, parse it using the filter.