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
213 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');you can try doing this.
component.ts
currentDate = new Date();component.html
{{currentDate | date:'yyyy-MM-dd'}}You can use date:'yyyy-MM-dd' pipe
curDate=new Date();
<p>{{curDate | date:'yyyy-MM-dd'}}</p>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.
1In 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>{{myDate | date:'fullDate'}}</h5>
</div>app.component.ts
export class AppComponent implements OnInit {
myDate = Date.now(); //date 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);
1In 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
