日期框 (Date)

支持日期和时间格式。

概述

基于HTML5标签实现
支持Date, DateTime, Month, Week, Time类型

代码演示

1.Date示例

可见

可用

只读

日期：

namespace WebSite.Docus.Inputs.Dates;

class Date1 : BaseComponent
{
    private Date? date;

    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<Date>("日期：", "Date").Build(value => date = value);
    }

    private void OnVisibleChanged(bool value) => date?.SetVisible(value);
    private void OnEnabledChanged(bool value) => date?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => date?.SetReadOnly(value);
    private void SetValue() => date?.SetValue(DateTime.Now);
    private string? GetValue() => date?.Value;
}

2.DateTime示例

可见

可用

只读

日期时间：

namespace WebSite.Docus.Inputs.Dates;

class Date2 : BaseComponent
{
    private Date? date;

    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<Date>("日期时间：", "DateTime")
               .Set(f => f.DateType, DateType.DateTime)
               .Build(value => date = value);
    }

    private void OnVisibleChanged(bool value) => date?.SetVisible(value);
    private void OnEnabledChanged(bool value) => date?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => date?.SetReadOnly(value);
    private void SetValue() => date?.SetValue(DateTime.Now);
    private string? GetValue() => date?.Value;
}

3.Month示例

可见

可用

只读

月份：

namespace WebSite.Docus.Inputs.Dates;

class Date3 : BaseComponent
{
    private Date? date;

    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<Date>("月份：", "Month")
               .Set(f => f.DateType, DateType.Month)
               .Build(value => date = value);
    }

    private void OnVisibleChanged(bool value) => date?.SetVisible(value);
    private void OnEnabledChanged(bool value) => date?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => date?.SetReadOnly(value);
    private void SetValue() => date?.SetValue($"{DateTime.Now:yyyy-MM}");
    private string? GetValue() => date?.Value;
}

4.Week示例

可见

可用

只读

周别：

namespace WebSite.Docus.Inputs.Dates;

class Date4 : BaseComponent
{
    private Date? date;

    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<Date>("周别：", "Week")
               .Set(f => f.DateType, DateType.Week)
               .Build(value => date = value);
    }

    private void OnVisibleChanged(bool value) => date?.SetVisible(value);
    private void OnEnabledChanged(bool value) => date?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => date?.SetReadOnly(value);
    private void SetValue() => date?.SetValue("2023-W30");
    private string? GetValue() => date?.Value;
}

5.Time示例

可见

可用

只读

时间：

namespace WebSite.Docus.Inputs.Dates;

class Date5 : BaseComponent
{
    private Date? date;

    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<Date>("时间：", "Time")
               .Set(f => f.DateType, DateType.Time)
               .Build(value => date = value);
    }

    private void OnVisibleChanged(bool value) => date?.SetVisible(value);
    private void OnEnabledChanged(bool value) => date?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => date?.SetReadOnly(value);
    private void SetValue() => date?.SetValue(DateTime.Now);
    private string? GetValue() => date?.Value;
}