Search code examples
angulardateangular-materialcalendarprimeng

Is there any package or component available for opening a Date Range in the button Using Angular?

I checked and referred many components for this but I am unable to find them.

enter image description here

Can anyone suggest and help if is there possible for a Date Range?

Solution

  • Edit: Since you want to have a collapsible datepicker I've extended this datepicker-inline stackblitz: https://stackblitz.com/edit/hsuszs

    Besides the mat-datepicker Angular also offers a mat-calender which is a part of the datepicker component. With that you get a simple calender which you can show and hide with some basic animations like in the stackblitz. If you want to close the calender when clicking outside you would have to implement a function which for example gives some calender element focus and closes the calender when losing focus. Or you could listen on clicks outside of the calender.

    Please mark the answer as accepted if it helped you solve your problem. If you have further questions feel free to ask.

    Original: You can refer to the Angular Material Docs: https://material.angular.io/components/datepicker/examples

    <button mat-raised-button (click)="picker.open()">Open</button>
<mat-form-field class="example-full-width">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

    Don't forget to import the related modules:

    import {MatDatepickerModule} from '@angular/material/datepicker';

    import {MatFormFieldModule} from '@angular/material/form-field';