How to display date correctly with Angular2+?

Asked
Active3 hr before
Viewed126 times

7 Answers

angular2display
90%

Search Answer Titles

Example_snippet/controller/utility/_angular2.js/ 'short': equivalent to 'M/d/yy. . .
'short': equivalent to 'M/d/yy, h:mm a'(6 / 15 / 15, 9: 03 AM).
'medium': equivalent to 'MMM d, y, h:mm:ss a'(Jun 15, 2015, 9: 03: 01 AM).
'long': equivalent to 'MMMM d, y, h:mm:ss a z'(June 15, 2015 at 9: 03: 01 AM GMT + 1).
'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz'(Monday, June 15, 2015 at 9: 03: 01 AM GMT + 01: 00).
'shortDate': equivalent to 'M/d/yy'(6 / 15 / 15).
'mediumDate': equivalent to 'MMM d, y'(Jun 15, 2015).
'longDate': equivalent to 'MMMM d, y'(June 15, 2015).
'fullDate': equivalent to 'EEEE, MMMM d, y'(Monday, June 15, 2015).
'shortTime': equivalent to 'h:mm a'(9: 03 AM).
'mediumTime': equivalent to 'h:mm:ss a'(9: 03: 01 AM).
'longTime': equivalent to 'h:mm:ss a z'(9: 03: 01 AM GMT + 1).
'fullTime': equivalent to 'h:mm:ss a zzzz'(9: 03: 01 AM GMT + 01: 00).
load more v
88%

Explore how TypeScript extends JavaScript to add more safety and tooling,,TypeScript understands JavaScript and uses type inference to give you great tooling without additional code

Example_snippet/controller/utility/_angular2.js/ tsconst user = { firstName: ". . .
tsconst user = {
   firstName: "Angela",
   lastName: "Davis",
   role: "Professor",
}
console.log(user.name) Property 'name'
does not exist on type '{ firstName: string; lastName: string; role: string; }'
.2339 Property 'name'
does not exist on type '{ firstName: string; lastName: string; role: string; }'.
Step 2 continued with tsconst user = { firstName: ". . .
tsconst user = {
   firstName: "Angela",
   lastName: "Davis",
   role: "Professor",
}
console.log(user.name) Property 'name'
does not exist on type '{ firstName: string; lastName: string; role: string; }'
.2339 Property 'name'
does not exist on type '{ firstName: string; lastName: string; role: string; }'.
load more v
72%

The date pipe accepts a format (optional parameter) that can be customized as showed in the code above (day/month/year) and we can also use some predefined formats according to the Angular docs:,By default, most of the predefined formats support the american date format (month/day/year),,If the default date format needs to be changed, we only need to modify the Constants file and the update will be applied automatically in all templates that are using the custom date pipes

Example_snippet/controller/utility/_angular2.js/ today | date: 'dd/MM/yyyy' . . .
today | date: 'dd/MM/yyyy'
load more v
65%

I always use Moment,js when I need to use dates for any reason

Example_snippet/controller/utility/_angular2.js/ {{valueDate | date: 'dd/MM/yyy. . .
{
   {
      valueDate | date: 'dd/MM/yyyy'
   }
}
load more v
75%

Only the en-US locale data comes with Angular, To localize dates in another language, you must import the corresponding locale data

Example_snippet/controller/utility/_angular2.js/ {{ value_expressi. . .
      {
         {
            value_expression | date[: format[: timezone[: locale]]]
         }
      }
load more v
40%

I'm using Angular2+ to make a Kanban board,,I've decided to add a deadline on tasks then to display it on the board with the format 'yyyy-MM-dd'

Example_snippet/controller/utility/_angular2.js/ 'yyyy-MM-dd'. . .
'yyyy-MM-dd'
load more v
22%

Example_snippet/controller/utility/_display.js/ <!DOCTYPE html> <html> <head>. . .
<!DOCTYPE html>
<html>

<head>
  <script src="https://jspm.io/system@0.18.17.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
  <script>
    System.config({
      paths: {
        'main.js': 'main.js'
      }
    });
    System.import('main.js');
  </script>
</head>

<body>
  <dateTime></dateTime>
  
  <div><br/><br/><a href="http://www.code-sample.com" target="_blank">Go more...</a></div>
</body>

</html>
load more v