How to initialize Start and End date with BlazorDateRangePicker

Question

I'm using BlazorDateRangePicker on 3 files. I would like the Start and End variables are initialized each time the dates are selected. For example I am on page 1, I select a date page, @bind-StartDate and @bind-EndDate are initialized with Start and End variables. When I go to page 2 I Start and End has the value of Start and End of the page one.

here my code :

 <DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate" class="form-control form-control-sm" OnRangeSelect="OnRangeSelect" Culture="@(System.Globalization.CultureInfo.GetCultureInfo("fr-FR"))" AutoApply=true placeholder="Choose a date...">

@code {
DateTimeOffset? StartDate { get; set; } = DateTime.Today.AddMonths(-1);
DateTimeOffset? EndDate { get; set; } = DateTime.Today.AddDays(1).AddTicks(-1);

Where put this code above to initialize them and how get them after ?

Hope you will understand what I mean :)

Answer 1

To achive this you'll need to put logic into a scoped service.

For example:

public class DateRangePickerService
{
    public DateTimeOffset? StartDate { get; set; } = DateTime.Today.AddMonths(-1);
    public DateTimeOffset? EndDate { get; set; } = DateTime.Today.AddDays(1).AddTicks(-1);
}

This service needs to be registered within your Program.cs file like this: builder.Services.AddScoped<DateRangePickerService>();

Now you can inject the service into both pages like this:

@inject DateRangePickerService dateRangePickerService

Within your code you'll need to bind to the property from the service.

<DateRangePicker @bind-StartDate="dateRangePickerService.StartDate" @bind-EndDate="dateRangePickerService.EndDate" class="form-control form-control-sm" OnRangeSelect="OnRangeSelect" Culture="@(System.Globalization.CultureInfo.GetCultureInfo("fr-FR"))" AutoApply=true placeholder="Choose a date...">