How to custom datepicker in angular 6|7|8

How to custom datepicker in angular 6|7|8

Step 1. install all libary bellow:

npm i @progress/kendo-angular-common
npm i @progress/kendo-angular-dateinputs
npm i @progress/kendo-angular-intl
npm i @progress/kendo-angular-l10n
npm i @progress/kendo-angular-popup
npm i @progress/kendo-theme-default

Step 2: add css in file angular-cli.json

 "styles": [
           
              "src/styles.scss",
              "node_modules/@progress/kendo-theme-default/dist/all.css"
            ],

Step 3. Open file app.module.ts add DateInputsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DateInputsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: open file app.component.html copy code bellow

<h1>How to custom datepicker in Angular 6|7|8</h1>
<kendo-datepicker  [(value)] ="value" (valueChange)="onChangeStartDay($event)" [format]="'yyyy/MM/dd'">
</kendo-datepicker>

Note:  this is how to kendo-datepicker set value null you can use placeholder=""

<h1>How to custom datepicker in Angular 6|7|8</h1>
<kendo-datepicker  placeholder="" (valueChange)="onChangeStartDay($event)" [format]="'yyyy/MM/dd'">
</kendo-datepicker>

Step 5: Open file app.component.ts coppy code below:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'customDatepicker';
  value :any = new Date();
}

Demo online datepicker in angular