Any way to add additional controls to the footer?

Question

I'd like to add some additional buttons and checkbox to the footer area (highlighted below) of the `

ejs-daterangepicker` component:

I've searched through the documentation and the closest I can find is the `cssClass` to customise the appearance but not actually add content.

The footer appears to be reliably contained in a `div` with class `e-footer` but I'd prefer not to load it in through DOM manipulation (e.g. jQuery) if possible.

Any suggestions?

UdhayaKumar Duraisamy · Accepted Answer

Hi Patrick,We have considered “Need to give footer template support for the DateRangePicker component popup element” 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/36981/need-to-give-footer-template-support-for-the-daterangepicker-component-popupYou can also communicate with us regarding the open features any time using the “Contact” option.Regards,Udhaya Kumar D

Patrick Fegan · Answer

Apologies, it occurred to me I should share what I currently have -> EJS DateRangePicker with Custom Footer

UdhayaKumar Duraisamy · Answer

Hi Patrick,Currently, the DateRangePicker component doesn’t support the template
for the footer section in the calendar popup. We can only achieve this through DOM manipulation. Also, we request you to share the use case scenario of your
requirement. This will help us to validate the query further and provide you
with a better solution. Regards,Udhaya
Kumar D

Patrick Fegan · Answer

Hi

Udhaya,Thanks for your reply. A simple description of use case is when using the component to trigger an API call and add additional options for the user. Here's an example...The SpaceX API allows us to retrieve past launches with, or without, the records' Mongo ID in the JSON response. We can allow the user to specify this option in the footer of the DateRangePicker to simplify UI design. I've provided a mock up on StackBlitz. If you search for 24/03/2006 to 25/03/2006 with the checkbox disabled, note there is no `_id` property in the response. Search for the same dates with the checkbox enabled and note the `_id` property is now present in the response.Hope that makes sense.Patrick.

UdhayaKumar Duraisamy · Answer

Hi Patrick,We are validating the requirement. We will update the further
details in two business days (11th August
2022).Regards,Udhaya
Kumar D

Patrick Fegan · Answer

Hi

Udhaya,Thank you for the feedback and great to hear the requirement has been validated.For now, we'll implement the DOM manipulation approach.Thanks,Patrick.

UdhayaKumar Duraisamy · Answer

Hi Patrick,We are happy to assist you. Please get back to us if you need any
further assistance on this.Regards,Udhaya
Kumar D