有Blazor计时器和颜色选择器吗？

有Blazor时间选择器和颜色选择器吗？

---

我正在寻找blazor中的颜色选择器和时间选择器，它支持大多数具有统一行为的浏览器。我发现只有HTML控件在不同浏览器中是不统一的。

正如Umair提到的，你可以在blazor应用程序中使用任何javascript库。据我所知，blazor包中没有您提到的任何默认控件。对于时间选择器，我建议您使用javascript以外的东西，或者您可以使用一些MatBlazor库-对于时间选择器，您可以使用带有额外时间选择的日期选择器。有关MatBlazor的更多信息，请参阅我已创建一个组件，用于在Blazor服务器中选择颜色。它使用HTML输入类型颜色

<input type="color" id="head" name="head" value="@InColor" @onchange="@UpdateIt">
<label for="head">@InColor</label>

@code {
    [Parameter]
    public string InColor { get; set; }
    [Parameter]
    public EventCallback<string> ReturnedColor { get; set; }

    private void UpdateIt(ChangeEventArgs e)
    {
        InColor = e.Value.ToString();
        ReturnedColor.InvokeAsync(InColor);
    }

}

---

您可以对日期选择器或其他已定义的HTML组件执行相同的操作。

使用值绑定是由绑定处理的值更改

组件标记：

<input type="color" @bind-value="@ColorHexCode"/>

组件代码：

public partial class ColorPicker : ComponentBase
{
    private string m_ColorHexCode;

    [Parameter]
    public string ColorHexCode
    {
        get => m_ColorHexCode;
        set
        {
            if (m_ColorHexCode == value) return;

            m_ColorHexCode = value;

            ColorHexCodeChanged.InvokeAsync(m_ColorHexCode);
        }
    }

    [Parameter]
    public EventCallback<string> ColorHexCodeChanged { get; set; }
}

公共部分类颜色选择器：ComponentBase
{
私有字符串m_ColorHexCode；
[参数]
公共字符串ColorHexCode
{
get=>m_ColorHexCode；
设置
{
if（m_ColorHexCode==值）返回；
m_ColorHexCode=值；
调用同步（m_ColorHexCode）；
}
}
[参数]
public EventCallback ColorHexCodeChanged{get；set；}
}

组件使用：

<ColorPicker @bind-ColorHexCode="@ColorCode"/>

将脚本部分添加到index.html或_Host.cshtml（头部分）

用法

@page/“
@使用BlazorColorPicker
选择一种颜色
@代码{
bool-isOpened=false；
字符串颜色=“#F1F7E9”；
void OpenModal（）
{
等间距=真；
}
void ClosedEvent（字符串值）
{
颜色=值；
等间距=假；
}
}

void OnChange（字符串值）
{
Log（$”值更改为：{Value}”）；
}

我会小心使用自定义控件。一些设备（尤其是手机）中的浏览器应该能够处理html控件，就像人们希望的那样。例如，iPhone用户可能习惯于使用特定控件输入颜色，并且可能不希望您覆盖默认值。

以下是一个项目，展示了如何创建一个简单的时间选择器：

然后，您可以像这样使用时间选择器：

<Pekspro.Blazor.TimePicker.TimePickerComponent @bind-SecondOfDay="SecondOfDay" />

在同一个项目中，还有一个组件日期将时间选择器与日期选择器组合在一起，您可以轻松地将其绑定到日期时间：

<Pekspro.Blazor.TimePicker.DateTimePickerComponent @bind-DateAndTime="SelectedDateTime" />

Blazor使用与其他网站相同的web控件，因为它仍然可以运行正常的HTML控件和javascript库，您可以找到任何javascript库，并将其与blazor一起使用。我认为微软有意不向库中添加太多默认组件：您现在看到blazor组件出现了一个新的市场。您始终可以使用

I创建了一个github rep，并为颜色选择器创建了一个示例项目：
<link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />
<script src="_content/BlazorColorPicker/colorpicker.js"></script>

@page "/"

@using BlazorColorPicker
<button class="btn btn-primary" @onclick="OpenModal">
    <div style="background-color:@color" class="buttonColor"></div> Select a Color
</button>

<ColorPicker Title="My Blazor ColorPicker" IsOpened="isOpened" Closed="ClosedEvent" MyColor="@color">
</ColorPicker>

@code {
    bool isOpened = false;
    string color = "#F1F7E9";

    void OpenModal()
    {
        isOpened = true;
    }

    void ClosedEvent(string value)
    {
        color = value;
        isOpened = false;
    }
}

<RadzenColorPicker @bind-Value=@color ShowHSV=@showHSV ShowRGBA=@showRGBA 
ShowColors=@showColors ShowButton=@showButton Change=@OnChange />


void OnChange(string value)
{
    console.Log($"Value changed to: {value}");
}

<Pekspro.Blazor.TimePicker.TimePickerComponent @bind-SecondOfDay="SecondOfDay" />

<Pekspro.Blazor.TimePicker.DateTimePickerComponent @bind-DateAndTime="SelectedDateTime" />