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

Question

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

Answer 1

我创建了一个在 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);
    }

}

要使用您所要做的就是创建一个新的 blazor 组件并粘贴整个代码。例如，我创建了一个

ColorSelector.razor

文件并在我的项目中使用：

<ColorSelector InColor="@MyColor" ReturnedColor="ColorChange"></ColorSelector>
...
@code
{
    private void ColorChange(string e)
    {
        MyColor = e;
        StateHasChanged();
    }
}

您可以对 DatePicker 或其他已定义的 HTML 组件执行相同的操作。

Answer 2

Install-Package BlazorColorPicker

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

<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;
    }
}

项目

或radzen

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


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

Answer 3

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

https://github.com/pekspro/BlazorTimePicker

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

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

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

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

Answer 4

我会将 @Mariano 的代码调整为内置 blazor

InputText

，这样您将进行两种方式的数据绑定，当单击提交时，您的

EditForm

将捕获更改：
ColorSelector.razor

<InputText type="color" id="head" name="head"
Value="@InColor"
ValueExpression="@(() => InColor)"
ValueChanged="@((string value) => UpdateIt(value))" />

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

    private void UpdateIt(string value)
    {
        InColor = value;
        ReturnedColor.InvokeAsync(InColor);
    }

}

然后你可以像这样使用它：

<ColorSelector InColor="@MyColor" ReturnedColor="ColorChange"></ColorSelector>
...
@code
{
    private void ColorChange(string e)
    {
        MyColor = e;
        StateHasChanged();
    }
}

Answer 5

使用值绑定是通过绑定处理值更改。

组件标记：

<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; }
}

组件使用：

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

Answer 6

您可以像这样使用内置时间选择器：

<InputDate Type="InputDateType.Time" @bind-Value="_time" />

Answer 7

正如 Umair 提到的，您可以在 blazor 应用程序中使用任何 javascript 库。据我所知，blazor 包中没有您提到的任何默认控件。对于时间选择器，我会推荐 javascript 世界之外的东西，或者您可以使用一些 MatBlazor 库 - 对于时间选择器，您可以使用带有额外时间选择的 datePicker。有关 MatBlazor 的更多信息，请参阅 this

Answer 8

我会小心使用自定义控件。 某些设备（尤其是手机）中的浏览器应该能够按照需要处理 html 控件。 例如，iPhone 用户可能习惯于使用特定控件输入颜色，并且可能不喜欢您覆盖默认值。