Partial date picker in angular 7

Question

I'm using angular 7 and I'm Searching for a component that can support partial date I need some date picker that the user can choose only year or year and month or year month and day (full day) for example, if the user wants to choose only year:

two muppets

I tried to search in angular material but I didn't find anything.

Does anyone know such a component?

Thanks!

Datepicker from angular Material can be customize as you want. Just have look at DateAdapter . See more at material.angular.io/components/datepicker/overview section Choosing a date implementation and date format settings — Jacopo Sciampi

Bono495 Bono495 · Accepted Answer · 2019-02-12T10:59:17

I think Angular Material is your go to, there are many options to make it work you're way. This is just an sample of how you can do it. Everything comes from the documentation: https://material.angular.io/components/datepicker/overview

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date" > 
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker  
    startView="multi-year"
    [startAt]="startDate"
    (yearSelected)="chosenYearHandler($event)"
    (monthSelected)="chosenMonthHandler($event, dp)">
  </mat-datepicker>
</mat-form-field>

and the functions

    date = new FormControl(new Date());

  chosenYearHandler(Year) {   
    this.date.setValue(Year);
  }
  chosenMonthHandler(Month) {
    this.date.setValue(Month);
  }

I recommend you read the documentation again and rethink the options you can do with the datepicker. Good luck!

Partial date picker in angular 7

1 Answers