在自定义 InputDate 组件中设置 dd/mm/yyyy 而不是 Blazor 中的 01/01/0001

Question

我在 blazor 中有一个自定义的 InputDate 控件，它工作正常但是当我运行我的 pp 我得到 01/01/0001 而不是 dd/mm/yyyy。

我想设置dd/mm/yyyy如果我不把时间设置为现在

如果我正常使用 InputDate 它工作正常并向我显示 dd/mm/yyyy 但在自定义控件中我遇到一些错误

这是我的模型：

  public class Quote
    {
        [Required(ErrorMessage = "Quote Date is a required field.")]              
        public DateTime? QuoteDate { get; set; }
    }

和海关控制：

@using System.Linq.Expressions

@inherits InputBase<DateTime>


     <div class=@ColumnLocation>
          @if (!string.IsNullOrWhiteSpace(Label))
            {              
                <label for="@Id">@Label</label>
            }                   
           <InputDate @bind-Value="@CurrentValue" class="form-control" placeholder="Enter date of preference"></InputDate>
           <ValidationMessage For="@ValidationFor" />
     </div>

@code {

    [Parameter] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    [Parameter] public Expression<Func<DateTime>> ValidationFor { get; set; }

    protected override bool TryParseValueFromString(string value, out DateTime result, out string validationErrorMessage)
    {
        result = DateTime.Parse(value);
        validationErrorMessage = null;
        return true;
    }
}

和页面：

@page "/counter"

   <EditForm Model="quote" OnValidSubmit="@SubmitButtonPressed" class="form-horizontal">
                    <DataAnnotationsValidator />

               
       @*for this custom control I've had some errors*@
           <UxInputDate Label="Quote Date3" @bind-Value="quote.QuoteDate" 
                                               ValidationFor="@(() => quote.QuoteDate)"/>                         
        @*for this normal control everything is fine*@
               <InputDate @bind-Value="quote.QuoteDate" class="form-control" ></InputDate>
                  

         <button type="submit" class="btn">Check 1</button>          
   </EditForm>
@code {
  
    Quote quote = new Quote();
    protected void SubmitButtonPressed()
    {
        ....
    }
}

错误：

无法从 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime?>' 转换为 'Microsoft.AspNetCore.Components.EventCallback'

无法将 lambda 表达式转换为预期的委托类型，因为块中的某些 return 类型不能隐式转换为委托 return 类型

无法将类型 'System.DateTime?' 隐式转换为 'System.DateTime'。存在显式转换（是否缺少转换？）

Answer 1

您将 InputBase 包裹在 InputBase 中，这有点令人费解。将任何 InputBase 控件包装在具有直通功能的另一个组件中需要的代码比您已经实现的要多一些。有一种更简单的方法可以为带有标签和验证消息的输入创建通用包装器控件。

@using System.Linq.Expressions
@typeparam TValue

<div class="m-2 p-2">
    @if (!string.IsNullOrWhiteSpace(Label))
    {
        <label for="@Id">@Label</label>
    }
    @ChildContent
    <ValidationMessage For="@ValidationFor" />
</div>

@code {
    [Parameter] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    [Parameter] public Expression<Func<TValue>> ValidationFor { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
}

然后这样实现：

 <CompositeInputControl Label="String" ValidationFor="() => _model.SelectValue">
     <input @bind-value="_model.SelectValue" />
 </CompositeInputControl>
 
<CompositeInputControl Label="Date" ValidationFor="() => _model.Time">
       <InputDate @bind-Value="_model.Time"></InputDate>
 </CompositeInputControl>

如果您想要更复杂的解决方案，请看我的一个屏幕截图。

我可以为您指出回购代码。

在自定义 InputDate 组件中设置 dd/mm/yyyy 而不是 Blazor 中的 01/01/0001

Set dd/mm/yyyy in a custom InputDate component instead of 01/01/0001 in Blazor

c#

asp.net-core

blazor

blazor-webassembly