Calendar from SfDateRangePicker as a standalone component

[Marian Tarpescu]

Greetings everyone,

I was just wondering if it's possible to use the calendar component of the SfDateRangePicker as a standalone, independent component. In other words, to drop the pop-up functionality, the Syncfusion Input element + icon as well as the Cancel and Apply buttons.

I am looking to get something like:


I should mention that the current form is actually reachable although only through some weird workarounds which of course are open to all sorts of unexpected bugs. In short, at this moment, we use a combination of visibility: hidden css overwrites as well as the ShowPopupAsync function from the SfDateRangePicker class.

Best Regards,
Marian

[Kokila Poovendran]

Hi Marian Tarpescu,

Thank you for reaching out to us with your query.

To achieve this, you can apply CSS styles as per your current approach. This involves using the visibility: hidden CSS property to hide elements like the Syncfusion Input element, icon, Cancel and Apply buttons.

For your convenience, we have provided a sample code snippet below:

<SfDateRangePicker TValue="DateTime?" @ref="dateRange" Width="500px">

    <DateRangePickerEvents TValue="DateTime?" Created="CreatedHandler" OnClose="OnCoseHandler"></DateRangePickerEvents>

</SfDateRangePicker>

@code {

    SfDateRangePicker<DateTime?> dateRange;

    public void CreatedHandler(object args)

    {

        dateRange.ShowPopupAsync();

    }

 

    public void OnCoseHandler(RangePopupEventArgs args)

    {

        args.Cancel = true;

    }

}

 

<style>

 

    .e-daterangepicker.e-popup .e-footer {

        visibility: hidden;

    }

 

    .e-input-group, .e-input-group.e-control-wrapper {

        visibility: hidden;

    }

 

</style>

Sample: https://blazorplayground.syncfusion.com/rNLAssZbotudqmOy

We hope this solution meets your requirements. If you have any further questions or need additional assistance, please don't hesitate to let us know.

[Marian Tarpescu]

Thank you for that, @KokilaPoovendran.

It is mostly what we already had but this seems like a hack more than a feature.
So, then the question remains:

Do you plan on supporting this component as a standalone element? 

It will probably save a lot of time for other developers if a simple flag is available for this. 

[Kokila Poovendran]

Hi Marian Tarpescu,

Thank you for reaching out and providing your feedback.

We understand your desire for a standalone calendar component from SfDateRangePicker, and we appreciate your innovative workaround to achieve this. However, currently, we do not have plans to support the standalone usage of the calendar component. While we acknowledge your request for a simple flag or feature to support this, at this time, we are unable to consider it as a feature on our roadmap.

We appreciate your understanding and value your input.