get current date with 'yyyy-MM-dd' format in Angular 4

Question

How i can get the current date with a specific format 'yyyy-MM-dd', for today by example i with that the result be: '2018-07-12', with using just the command

myDate = new Date();

thanks a lot

Answer 1

You can use DatePipe for formatting Date in Angular.

In ts if you want to format date then you can inject DatePipe as Service in constructor like this

import { DatePipe } from '@angular/common';

@Component({
    templateUrl: './name.component.html',
    styleUrls: ['./name.component.scss'],
    providers: [DatePipe]
})

myDate = new Date();
constructor(private datePipe: DatePipe){
    this.myDate = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');
}

And if you want to format in html file, 'Shortdate' will return date of type MM/DD/YY

{{myDate | date: 'shortDate' }}

As of Angular 6, this also works,

import {formatDate} from '@angular/common';

formatDate(new Date(), 'yyyy/MM/dd', 'en');

Answer 2

you can try doing this.

---

component.ts

currentDate = new Date();

---

component.html

{{currentDate | date:'yyyy-MM-dd'}}

Answer 3

You can use date:'yyyy-MM-dd' pipe

curDate=new Date();

<p>{{curDate | date:'yyyy-MM-dd'}}</p>

Answer 4

If you only want to display then you can use date pipe in HTML like this :

Just Date:

your date | date: 'dd MMM yyyy'

Date With Time:

your date | date: 'dd MMM yyyy hh:mm a'

And if you want to take input only date from new Date() then :

You can use angular formatDate() in ts file like this -

currentDate = new Date();

const cValue = formatDate(currentDate, 'yyyy-MM-dd', 'en-US');

Answer 5

Here is the example:

function MethodName($scope)
{
    $scope.date = new Date();
}

You can change the format in view here we have a code

<div ng-app ng-controller="MethodName">
    My current date is {{date | date:'yyyy-MM-dd'}} . 
</div>

I hope it helps.

Answer 6

In Controller ,

 var DateObj = new Date();

 $scope.YourParam = DateObj.getFullYear() + '-' + ('0' + (DateObj.getMonth() + 1)).slice(-2) + '-' + ('0' + DateObj.getDate()).slice(-2);

Answer 7

app.component.html

<div>
     <h5 style="color:#ffffff;">{{myDate | date:'fullDate'}}</h5>
</div>

app.component.ts

export class AppComponent implements OnInit {
myDate = Date.now();    //date 

Answer 8

Try this:

   import * as moment from 'moment';

     ngOnInit() {
     this.date = moment().format("YYYY Do MMM");
                }

Answer 9

Use the following:

new Date().toLocaleDateString();

Then as per your requirement just change locale for your application:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

//Provide the locale in any Module or Component by the LOCALE_ID token.
providers: [
 {provide: LOCALE_ID, useValue: 'fr'}
]

Answer 10

To format date in Angular we can use Angular Datepipe.

For an example we can use following code to get formatted date in our code.

import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-name-class',
    templateUrl: './name.component.html',
    styleUrls: ['./name.component.scss']
})

export class NameComponent implements OnInit {
  
  // define datepipe

  datePipe: DatePipe = new DatePipe('en-US');
  
  constructor(){}

  // method to get formatted date

  getformattedDate(){
    
    var date = new Date();
    var transformDate = this.datePipe.transform(date, 'yyyy-MM-dd');
    return transformDate;

  }
}

Answer 11

In case this is to use together w/ <input type="datetime-local"> such as

<input matInput #dateTimeInput type="datetime-local" [value]="todayAsString" step="1" [min]="todayAsString">

then todayAsString should be set as

this.todayAsString = formatDate(new Date(), 'yyyy-MM-dd', 'en');
this.todayAsString += 'T' + formatDate(new Date(), 'hh:mm', 'en');

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

Answer 12

In HTML FILE

{{date_variable|date:'fullDate'}}

Explanation

Using pipes is better because in pipes we can transform output without changing the input rather than using other methods. Here, I used the following link as fullDate you can use your own combination

Answer 13

You can use simple var dt = new Date().toISOString().slice(0, 10);

Answer 14

TS File =>

export class YourComponent implements OnInit {
  //Add This
  myDate = Date.now();

  constructor() { }
  ngOnInit(): void {}
}

HTML File =>

    //Formatted Date.
    <p>{{myDate | date:'yyyy-MM-dd'}}</p>
    //Default date format
    <p>{{myDate | date:'fullDate'}}</p>

Answer 15

TS(TypeScript)

public currentDate = new Date();

HTML

{{ currentDate | date:'yyyy年MM月dd日' }}

Output:

2022年12月27日

Answer 16

can use format attribute in HTML.