Dates are displaying in weird way angular 6

Asked
Active3 hr before
Viewed126 times

7 Answers

angulardates
90%

Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML,,Modify the birthday template to give the date pipe a format parameter

Example_snippet/controller/utility/_angular.js/ import { Component } from '@an. . .
import { Component } from '@angular/core';

@Component({
  selector: 'hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}
load more v
88%

You can pass an options object to the DateTimeFormat function to display time values and customize the output,,If you want to create a Date object for the current date and time of the system, use the Date constructor without passing any argument

Example_snippet/controller/utility/_angular.js/ const date = new Date("2020-12. . .
const date = new Date("2020-12-31");
load more v
72%

The date pipe uses intl to format date and is part of the i18n package that Angular offers, that's why it uses locale dates,,Because in 4

Example_snippet/controller/utility/_angular.js/ Formatted: Mar 31, 2004 Actual. . .
Formatted: Mar 31, 2004
Actual: Thu Apr 01 2004 00: 00: 00 GMT - 0400(Eastern Daylight Time)

Formatted: Apr 1, 2016
Actual: Fri Apr 01 2016 00: 00: 00 GMT - 0400(Eastern Daylight Time)
load more v
65%

Search Answer Titles

Example_snippet/controller/utility/_angular.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
75%

The following component uses a date pipe to display the current date in different formats,,You can construct a format string using symbols to specify the components of a date-time value, as described in the following table

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

That's because values, which you send to server and use immediately, are different, Notice, that directly you use loctime variable, which holds a value after some transformations, but you send to server just a new Date()

Example_snippet/controller/utility/_angular.js/ const date = new Date(); const. . .
const date = new Date();
const d = date.getUTCDate();
const day = (d < 10) ? '0' + d : d;
const m = date.getUTCMonth() + 1;
const month = (m < 10) ? '0' + m : m;
const year = date.getUTCFullYear();
const h = date.getUTCHours();
const hour = (h < 10) ? '0' + h : h;
const mi = date.getUTCMinutes();
const minute = (mi < 10) ? '0' + mi : mi;
const sc = date.getUTCSeconds();
const second = (sc < 10) ? '0' + sc : sc;
const loctime = `${year}-${month}-${day}T${hour}`;

console.log('date:', date);
console.log('loctime:', loctime);
console.log('typeof date:', typeof date);
console.log('typeof loctime:', typeof loctime);
load more v
22%

Template-driven forms, nested within same component, Template-driven forms, nested within same component ,For the template-driven form, we need to do the following changes:,You can try the full example with template-driven forms in this Plunker,

Example_snippet/controller/utility/_dates.js/ <form> <div> <label>Name. . .
<form>
   <div>
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div>
      <label>Birth Year</label>
      <input type="text" name="birthYear" />
   </div>

   <div>
      <h3>Location</h3>
      <div>
         <label>Country</label>
         <input type="text" name="country" />
      </div>
      <div>
         <label>City</label>
         <input type="text" name="city" />
      </div>
   </div>

   <div>
      <h3>Phone numbers</h3>
      <div>
         <label>Phone number 1</label>
         <input type="text" name="phoneNumber[1]" />
         <button type="button">remove</button>
      </div>
      <button type="button">Add phone number</button>
   </div>

   <button type="submit">Register</button>
   <button type="button">Print to console</button>
</form>
load more v