We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Selecting a date range


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?

3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team November 7, 2022 01:28 AM

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

IM Ignacy Mielniczek November 7, 2022 05:07 AM

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.

UD UdhayaKumar Duraisamy Syncfusion Team November 8, 2022 06:06 AM

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: 


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

Live Chat Icon For mobile
Up arrow icon