Primeng p-calendar range mode with empty start date

83 Views Asked by At

Currently developing a feature for date filtering and instead going with 2 date inputs would like to achieve to reduce to one date input in range mode.

According to primeng documentation p-calendar component allows the range mode on one component where user selects a range from a calendar component by clicking 2 dates(same is allowed)

<p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>

Selecting only one date - start date is possible by clicking one date, then clicking outside the overlay dialog for the calendar component.

Selecting only end date is not achievable out of the box, and i cannot seem to find a solution so far.

I would like to have the possibility to select only the end date, therefore achieveing that the start date is empty(null). This use case allows me to pass the parameters to the filter method of the data table and search for all the records that are before the end date entered

Did anyone achieve this by only using a primeng component?

I am aware i can build up a custom component for this.

1

There are 1 best solutions below

0
Marlon On

this use of the component is not described in the API. I think you need to build your own solution for this.

When is it even clear that it should be a start or end date if you only select one date?

I would suggest a toggle button in a custom header where you also specify whether a single date should count as a start or end date. Otherwise use a normal range date picker.