Is there anyway to get the label of a selected DateRangePickerPreset

[Vincent McCarthy]

Hello,

Is it possible to get the name of the DateRangePickerPreset selected. I can get the date ranges that would represent the last 90 days for example but I need to persist the choice so that it can be used again in the future i.e last 90 days from whatever the future date is

For example if the user selected '90 days' from the DateRangePickerPresets below can one somehow see this was a preset and not a custom selection where the date range of the last 90 days was manually selected.

(I don't understand why but the code and screenshot are not showing up below but they did on the original unedited version??)

       

       

           

           

           

           

       

   

[Sevvandhi Nagulan]

Hi Vincent, 

Greetings from Syncfusion support. 

We are not sure about the stated requirement. Yet we assume that, when you pick the value manually that already in the presets, then the presets will be displayed as selected when you open the popup. Please check whether it is your requirement or not. If not share the requirement with the video or code example. It will help us understand and proceed further. 

Regards, 

Sevvandhi N 

[Vincent McCarthy]

Hello,

<SfDateRangePicker @ref="DatePicker" Width="@Width" Placeholder="Choose a Range" Min="@StartDate" Max="@EndDate"

                   ShowClearButton="true" CssClass="@CustomCssClass"

                   ValueChanged="OnValueChanged">

    <DateRangePickerEvents Cleared="Cleared"></DateRangePickerEvents>

    <DateRangePickerPresets>

        <DateRangePickerPreset Label="Last 30 days" Start="@last30daysStart" End="@last30daysEnd" />

        <DateRangePickerPreset Label="Last 90 days" Start="@last90daysStart" End="@last90daysEnd" />

        <DateRangePickerPreset Label="This month" Start="@monthStart" End="@monthEnd" />

        <DateRangePickerPreset Label="This year" Start="@yearStart" End="@yearEnd" />

    </DateRangePickerPresets>

</SfDateRangePicker>

What I want is that onValueChanged above to get the label of the preset that caused the change

I had code attached but lost it after editing the post yesterday

Regards
Vincent

[Sevvandhi Nagulan]

Hi Vincent, 

Thanks for the update. 

In the ValueChange event, we could not get the presets text selected. You may also identify which presets are selected based on comparing the StartDate and EndDate with the Start and End values presets. Refer to the code below, 

<SfDateRangePicker> 

    <DateRangePickerPresets> 

        <DateRangePickerPreset Label="Last 30 days" Start="@last30daysStart" End="@last30daysEnd"></DateRangePickerPreset> 

        <DateRangePickerPreset Label="Last 90 days" Start="@last90daysStart" End="@last90daysEnd" /> 

    </DateRangePickerPresets> 

    <DateRangePickerEvents ValueChange="onValueChanged"></DateRangePickerEvents> 

</SfDateRangePicker> 

@code{  

 

    public DateTime last30daysStart { get; set; } = DateTime.Now.AddDays(-30); 

    public DateTime last30daysEnd { get; set; } = DateTime.Now; 

 

    public DateTime last90daysStart { get; set; } = DateTime.Now.AddDays(-30); 

    public DateTime last90daysEnd { get; set; } = DateTime.Now; 

 

 

    public void onValueChanged(RangeEventArgs args) 

    { 

        if(args.StartDate.Date == last30daysStart.Date && args.EndDate.Date == last30daysEnd.Date) 

        { 

            Console.WriteLine("Last 30 days chosen"); 

        } 

        else if(args.StartDate.Date == last90daysStart.Date && args.EndDate.Date == last90daysEnd.Date) 

        { 

            Console.WriteLine("Last 90 days chosen"); 

        } 

    } 

 

    } 

Regards, 

Sevvandhi N 

[Vincent McCarthy]

Hi Sevvandhi

Thanks for the response.
I already tried a workaround similar to below where I try to pick the label based on the days selected but this opens up the issue that a user may define a custom date that is, for example, also the last 30 days.
In that case I would save the preferred filter as last 30 days but in this case this is incorrect as on load the user doesn't want the last 30 days (which will present a different date range every day) but her defined date range.

It's unfortunate the preset isn't available but it's not a blocker or anything as I've built a control where I show a drop down of available date presets and only show the date range picker if 'Custom Date Range' is selected.

Regards
Vincent

[Sevvandhi Nagulan]

Hi Vincent, 

 

 

Thanks for the update. 

 

 

We checked the reported requirement. We retained the isPresetClick flag for knowing whether the date is selected manually or selected using presets. We used the JSInterop for that and returned the flag value from the client to the server. You will get to know, with the help of the flag, whether value is selected manually or using presets. Refer to the code, 

 

[presets.js] 

 

var isClick = false; 

window.OnSelect = (id) => { 

    return isClick; 

};  

 

window.OnCreated = (id) => { 

    document.getElementById(id).ej2_instances[0].open = function (e) { 

        var list = document.getElementById(id).ej2_instances[0].popupObj.element.querySelectorAll('.e-list-item'); 

        for (var i = 0; i < list.length; i++) { 

            if (!list[i].id.includes("custom_range")) { 

                list[i].addEventListener('click', function (e) { 

                    isClick = true;  

                }); 

            } 

 

        } 

    } 

};  

 

 

 

[index.razor] 

 

public async Task onRangeSelected(RangeEventArgs args) 

    { 

        isPresetClick = await JSRuntime.InvokeAsync<Boolean>("OnSelect", dateRangeObj.ID); 

 

        if (args.StartDate.Date == last3daysStart.Date && args.EndDate.Date == last3daysEnd.Date && isPresetClick) 

        { 

            Console.WriteLine("Value choosen using the presets"); 

        } 

        else if (args.StartDate.Date == last3daysStart.Date && args.EndDate.Date == last3daysEnd.Date && !isPresetClick) 

        { 

            Console.WriteLine("Value choosen by manually"); 

        } 

    } 

 

Refer the below sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1286470155 

 

 

JSInterop Reference link: https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1 

 

Regards, 

Sevvandhi N