Selecting a date range

[Ignacy Mielniczek]

Hi,

I need a calendar where I can select a range of dates like this:

Preferably by two clicks (start & end) or by drag-select. I haven't found a way to do that.. the closest I got is setting [isMultiselection]="true":

But is this model, if I need to select whole month, I need to click 31 times which is unacceptable. 

Is there a way to allow selecting time ranges?

[UdhayaKumar Duraisamy]

You can use Syncfusion's DateRangePicker component for your requirements. The Angular DateRangePicker component lets users choose a start date and an end date as a range through a calendar pop-up or by entering values directly into the HTML input text box.

Documentation : https://ej2.syncfusion.com/angular/documentation/daterangepicker/getting-started/

Online Demo : https://ej2.syncfusion.com/angular/demos/#/bootstrap5/daterangepicker/default

[Ignacy Mielniczek]

Thank you for the reply.

However, I am having problems with DateRangePicker. I want to see a single month only, but when I restrict the dates by [min] and [max] it still displays a previous month which is all disabled. It doesn't make any sense to be honest:

Also, is there a way to display the right part without the popup? Like the calendar view of a single month? I want users to see the grid right away, without clicking the input.

[UdhayaKumar Duraisamy]

We have already considered “Support for continuous multiple selection in calendar using mouse drag and shift key” as a feature from our end, but we do not have any immediate plan to implement this feature. At the planning stage for every release cycle, we review all open features and implement the features based on feature rank, customer requested count, and volume wish list.

The status of implementation can be tracked through the below portal link: 

https://www.syncfusion.com/feedback/28681/allow-multiple-mouse-selection-drag-select

You can also communicate with us regarding the open features at any time using the “Contact” option.