Odtnhj

I want to show the date in date picker in MON YYYY format. When user clicks on any date I just want to show month and Year and date is of no use for me but I have in database (Oracle) have field as date time, so cannot either pass the date in string format.

Ex: if user selects 11/14/2018 then want to show him date as NOV 2018 but in database I want it as 11/1/2018( need to set date to 1 by default irrespective of date selection)

Angular material date picker doesn't have any method or property where we can apply date format directly but with the help of @angular/material library you can customize services for the formatting.

HTML:

<mat-form-field>
 <input matInput [matDatepicker]="dp" placeholder="select date" (dateChange)="onChange($event.value)">
 <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
 <mat-datepicker #dp startView="month"></mat-datepicker>
</mat-form-field>

Step1: Import required class and constant variables.

import NativeDateAdapter, MAT_DATE_FORMATS, DateAdapter from "@angular/material";

Step2: Used NativeDateAdapter class method for formatting.

const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
export class AppDateAdapter extends NativeDateAdapter 

 format(date: Date, displayFormat: Object): string 
 if (displayFormat === 'input') 
 const day = date.getDate();
 const month = date.getMonth();
 const year = date.getFullYear();
 return `$months[month] $year`;
 
 return date.toDateString();
 

Step3: Declared date format constant.

export const APP_DATE_FORMATS =

 parse: 
 dateInput: month: 'short', year: 'numeric', day: 'numeric' ,
 ,
 display: 
 dateInput: 'input',
 monthYearLabel: year: 'numeric', month: 'numeric' ,
 dateA11yLabel: year: 'numeric', month: 'long', day: 'numeric' ,
 monthYearA11yLabel: year: 'numeric', month: 'long' ,
 
;

Step4: Register providers under the component or main module

@Component(
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss'],
 providers: [
 
 provide: DateAdapter, useClass: AppDateAdapter
 ,
 
 provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
 
 ]
)
export class TestComponent 
 constructor() 

 onChange(val) 
 var d = new Date(val);
 let date = [d.getFullYear(), ('0' + (d.getMonth() + 1)).slice(-2), ('01').slice(-2)].join('-');
 console.log(date);
 

Selection: 02/14/2018

Display: Feb 2018

Output: 2018-02-01 ( in .ts file)