I've created a re-useable custom Blazor component to provide a Day+Month selector (no year).
I'm passing in a DateTime variable and updating this via the component - well, I do a new DateTime() as the DateTime is immutable. The original variable doesn't get updated through - is this because I do a new DateTime()?
Component
<div class="form-field">
<label class="col-form-label">@SelectName</label>
<div class="row">
<div class="col">
<InputSelect ValueExpression="@(()=>selectedDay)"
Value="@selectedDay"
ValueChanged="@((int value) => OnDayValueChanged(value))" class="form-control">
@for (int day = 1; day <= numberOfDaysInSelectedMonth; day++)
{
<option value="@day" selected="@(selectedDay==day?true:false)">@day</option>
}
</InputSelect>
</div>
<div class="col">
<InputSelect ValueExpression="@(()=>selectedMonth)"
Value="@selectedMonth"
ValueChanged="@((int value) => OnMonthValueChanged(value))" class="form-control">
@for (int month = 1; month <= 12; month++)
{
<option value="@month" selected="@(selectedMonth==month?true:false)">@Months[month-1]</option>
}
</InputSelect>
</div>
</div>
</div>
@code {
[Parameter] public DateTime SelectedDate { get; set; }
[Parameter] public string SelectName { get; set; }
private int selectedDay { get; set; }
private int selectedMonth { get; set; }
private int numberOfDaysInSelectedMonth { get; set; } = 0;
private const int year = 2001; //Not a leap year
private string[] Months = { "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August","September","Oktober","November","December"};
[Parameter] public EventCallback<DateTime> OnDateSet { get; set; }
protected override void OnInitialized()
{
selectedDay = SelectedDate.Day;
selectedMonth = SelectedDate.Month;
SetNumberOfDaysInMonth();
}
private void SetNumberOfDaysInMonth()
{
numberOfDaysInSelectedMonth = DateTime.DaysInMonth(year, selectedMonth);
}
private async Task OnDayValueChanged(int value)
{
selectedDay = value;
await SetDate();
}
private async Task OnMonthValueChanged(int value)
{
selectedMonth = value;
SetNumberOfDaysInMonth();
if(selectedDay > numberOfDaysInSelectedMonth)
{
selectedDay = numberOfDaysInSelectedMonth;
}
await SetDate();
}
private async Task SetDate()
{
SelectedDate = new DateTime(
year,
selectedMonth,
selectedDay,
0, 0, 0
);
//My fix
await OnDateSet.InvokeAsync(SelectedDate);
}
}
When using the component I do this:
<DayMonthSelect SelectedDate="@serviceDescription.PlanValidFrom" SelectName="Gyldigt fra"></DayMonthSelect>
I've created a work-around using an EventCallBack with the new DateTime, but I would rather not use this fix as it also requires a receiving function for each usage of the component.
[Parameter] public EventCallback<DateTime> OnDateSet { get; set; }
And adding calling the callback method
<DayMonthSelect SelectedDate="@serviceDescription.PlanValidFrom" SelectName="Gyldigt fra" OnDateSet="SetValidFromDate"></DayMonthSelect>
I've created other shared components when the input variable does get updated in the component. Just not this one!
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…