如何使用BlazorDateRangePicker初始化开始和结束日期

huangapple go评论64阅读模式
英文:

How to initialize Start and End date with BlazorDateRangePicker

问题

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 如何使用BlazorDateRangePicker初始化开始和结束日期

英文:

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 :

 &lt;DateRangePicker @bind-StartDate=&quot;StartDate&quot; @bind-EndDate=&quot;EndDate&quot; class=&quot;form-control form-control-sm&quot; OnRangeSelect=&quot;OnRangeSelect&quot; Culture=&quot;@(System.Globalization.CultureInfo.GetCultureInfo(&quot;fr-FR&quot;))&quot; AutoApply=true placeholder=&quot;Choose a date...&quot;&gt;

@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 如何使用BlazorDateRangePicker初始化开始和结束日期

答案1

得分: 0

为了实现这一点,您需要将逻辑放入一个作用域服务。

例如:

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

需要在您的 Program.cs 文件中注册此服务,如下所示:
builder.Services.AddScoped<DateRangePickerService>();

现在您可以像这样将服务注入到两个页面中:

@inject DateRangePickerService dateRangePickerService

在您的代码中,您需要绑定到来自该服务的属性。

<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..."></DateRangePicker>
英文:

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&lt;DateRangePickerService&gt;();

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.

&lt;DateRangePicker @bind-StartDate=&quot;dateRangePickerService.StartDate&quot; @bind-EndDate=&quot;dateRangePickerService.EndDate&quot; class=&quot;form-control form-control-sm&quot; OnRangeSelect=&quot;OnRangeSelect&quot; Culture=&quot;@(System.Globalization.CultureInfo.GetCultureInfo(&quot;fr-FR&quot;))&quot; AutoApply=true placeholder=&quot;Choose a date...&quot;&gt;

huangapple
  • 本文由 发表于 2023年2月23日 22:09:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/75545922.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定