Related questions

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

2018-07-12 07:42 Hazem HASAN imported from Stackoverflow

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

3 answers

  • answered 2018-07-12 07:45 Peter

    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.

  • answered 2018-07-12 07:45 Krishna Rathore

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

    curDate=new Date();

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

  • answered 2018-07-12 07:50 khush

    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

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

    And if you want to format in html file,

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

    As of Angular 6, this also works,

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

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

See also questions close to this topic

  • angular 7 slow on refresh OR route change

    env. ubuntu 16.04 node: v10.15.1 npm:6.4.1

    I have two pages in my newly created web app, less, html. no ajax calls.

    Here is my package.json

    {
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "ngx-bootstrap": "^3.2.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

    in chrome debug, I do not see any delays, all loads in 2-3 ms. but in fact it takes 2-3-4 seconds to refresh.

    This is how I defined the routes.

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {AppComponent} from './app.component';
import {RegisterForm1Component} from './components/register/register-form1.component';
import {MembershipComponent} from './domain/membership.component';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '', redirectTo: '/register', pathMatch: 'full' },
  { path: 'login', component: MembershipComponent },
  { path: 'register', component: RegisterForm1Component }
];

@NgModule({
  declarations: [],
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {


}

    Any idea?

  • Unable to call an Api in ionic 3

    I am trying to call an API but whenever I call it I am getting Cross-Origin Read Blocking (CORB) blocked cross-origin response error and I don't know how to deal with it. Any Help would be appreciated.

  • My Angular project starts with Cannot Get

    I am building an Angular project in Visual Studio 2017. I have a Dotnet Core Web API for backend.

    When I start both project the Angular project gives 404 error. Reloading the page makes no change.

    When I change and save somthing on any typescript file and reload the page it receives the angular pages.

    Is it somthing about IIS? I changed the starting order of but it didnt solve the problem.

    This is the aa.module.ts

    import { PaginationComponent } from './shared/pagination.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { ModelComponent } from './model/model.component';
import { CustomerComponent } from './customer/customer.component';
import { VehicleFormComponent } from './vehicle-form/vehicle-form.component';
import { VehicleService } from './services/vehicle.service';
import { VehicleListComponent } from './vehicle-list/vehicle-list.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    ModelComponent,
    CustomerComponent,
    VehicleFormComponent,
    VehicleListComponent,
    PaginationComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      //{ path: '', redirectTo:'vehicles', pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'model', component: ModelComponent },
      { path: 'customer', component: CustomerComponent },
      { path: 'vehicles', component: VehicleListComponent },
      { path: 'vehicles/new', component: VehicleFormComponent },
      { path: 'vehicles/:id', component: VehicleFormComponent },
    ], { useHash: true })
  ],
  providers: [VehicleService],
  bootstrap: [AppComponent]
})
export class AppModule { }