日期范围 (DateRange)

日期范围选择框组件。

概述

显示Date区间查询

代码演示

1.默认示例

日期1：

日期2：

namespace WebSite.Docus.Inputs.DateRanges;

class DateRange1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<DateRange>("日期1：", "DateRange1").Build();
        builder.Field<DateRange>("日期2：", "DateRange2").Value("2023-01-01~2023-01-31").Build();
    }
}

2.控制示例

可见

可用

只读

日期：

namespace WebSite.Docus.Inputs.DateRanges;

class DateRange2 : BaseComponent
{
    private DateRange? dateRange;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<FieldControl>()
               .Set(c => c.OnVisibleChanged, OnVisibleChanged)
               .Set(c => c.OnEnabledChanged, OnEnabledChanged)
               .Set(c => c.OnReadOnlyChanged, OnReadOnlyChanged)
               .Set(c => c.SetValue, SetValue)
               .Set(c => c.GetValue, GetValue)
               .Build();

        builder.Field<DateRange>("日期：", "DateRange").Build(value => dateRange = value);
    }

    private void OnVisibleChanged(bool value) => dateRange?.SetVisible(value);
    private void OnEnabledChanged(bool value) => dateRange?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => dateRange?.SetReadOnly(value);
    private void SetValue() => dateRange?.SetValue("2023-01-01~2023-01-31");
    private string? GetValue() => dateRange?.Value;
}