Angular js (1.5) date filter: making it modular

Question

I have this sprinkled in various different templates in my app.

<span>
  {{value.date | date : "yyyy-MM-dd HH:mm" : 'PDT'}} PDT
</span

I'll always use the same date format throughout the app.

I'm trying to figure out how to modularize the above so that I'm not repeating the same thing everywhere. I think the right way to do this is to make a component and then just use that wherever I need. E.g.

<formatted-date value="value"></formatted-date>

but I'm not sure if that is the correct way or if I should use a service/controller instead...?

The docs mention using

$filter('date')(date, format, timezone)

but I'm a bit lost as to where that would go in the general scheme of things (service/controller?).

(Apologies in advance if this is a stupid simple question or if I'm using the wrong terminology...I'm new to Angular and still trying to figure out the right way to do things.)

Answer 1

I think in this case you can use angular i18n. Just choose a locale file from angular locale cdn then change as you want and import it in your project.
You can change almost everything, including filters. To changed default date filter just change the value of "mediumDate" to what you want. e.g: "dd/MM/yyyy"

Angular i18n docs here

EN-US Locale example:

'use strict';
angular.module("ngLocale", [], ["$provide", function($provide) {
var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"};
function getDecimals(n) {
  n = n + '';
  var i = n.indexOf('.');
  return (i == -1) ? 0 : n.length - i - 1;
}

function getVF(n, opt_precision) {
  var v = opt_precision;

  if (undefined === v) {
    v = Math.min(getDecimals(n), 3);
  }

  var base = Math.pow(10, v);
  var f = ((n * base) | 0) % base;
  return {v: v, f: f};
}

$provide.value("$locale", {
  "DATETIME_FORMATS": {
    "AMPMS": [
      "AM",
      "PM"
    ],
    "DAY": [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ],
    "ERANAMES": [
      "Before Christ",
      "Anno Domini"
    ],
    "ERAS": [
      "BC",
      "AD"
    ],
    "FIRSTDAYOFWEEK": 6,
    "MONTH": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    "SHORTDAY": [
      "Sun",
      "Mon",
      "Tue",
      "Wed",
      "Thu",
      "Fri",
      "Sat"
    ],
    "SHORTMONTH": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "STANDALONEMONTH": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    "WEEKENDRANGE": [
      5,
      6
    ],
    "fullDate": "EEEE, MMMM d, y",
    "longDate": "MMMM d, y",
    "medium": "MMM d, y h:mm:ss a",
    "mediumDate": "MMM d, y",
    "mediumTime": "h:mm:ss a",
    "short": "M/d/yy h:mm a",
    "shortDate": "M/d/yy",
    "shortTime": "h:mm a"
  },
  "NUMBER_FORMATS": {
    "CURRENCY_SYM": "$",
    "DECIMAL_SEP": ".",
    "GROUP_SEP": ",",
    "PATTERNS": [
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 3,
        "minFrac": 0,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "",
        "posPre": "",
        "posSuf": ""
      },
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 2,
        "minFrac": 2,
        "minInt": 1,
        "negPre": "-\u00a4",
        "negSuf": "",
        "posPre": "\u00a4",
        "posSuf": ""
      }
    ]
  },
  "id": "en-us",
  "localeID": "en_US",
  "pluralCat": function(n, opt_precision) {  var i = n | 0;  var vf = getVF(n, opt_precision);  if (i == 1 && vf.v == 0) {    return PLURAL_CATEGORY.ONE;  }  return PLURAL_CATEGORY.OTHER;}
});
}]);

Answer 2

Have you thought about creating a custom filter? You could then replace all instances with:

{{value.date | myDateFormat}}

Heres an example:

app.filter('myDateFormat', ['$filter', function ($filter) {

    return function (input) {

        if (input) { 

            // set your dateFormat and timezone here
            var dateFormat = "yyyy-MM-dd HH:mm";
            var timezone = "PDT";

            // format your date
            var formattedDate = $filter('date')(new Date(input), dateFormat,  timezone);

            return formattedDate;

        };

        return "";

    };

}]);

This will enable you to use the same date format and easily change it in the future.

Otherwise, If you are looking to always keep the span tags and PDT text too, then yes, create a component that you can re-use where you need it. You can achieve this by using a directive.

You can provide a template and pass in the $filter service to your directive and do the same logic there.