Get Current Date with 'Yyyy-Mm-Dd' Format in Angular 4

Get Current Date with 'Yyyy-Mm-Dd' Format in Angular 4

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

2

13 Answers

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');
5

you can try doing this.


component.ts

currentDate = new Date();

component.html

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

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

curDate=new Date();

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

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');

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.

1

In Controller ,

 var DateObj = new Date();

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

Try this:

   import * as moment from 'moment';

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

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 
1

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'}
]

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;

  }
}

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

1

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:

can use format attribute in HTML.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Robert Thorne
Author

Robert Thorne

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.