Есть ли у Blazor timepicker и colorPicker?

Как упоминал Umair, вы можете использовать любую библиотеку javascript в приложении Blazor. Насколько мне известно, в пакете blazor нет упомянутых вами элементов управления по умолчанию. Для средства выбора времени я бы порекомендовал что-то из мира javascript, или вы можете использовать некоторую библиотеку MatBlazor - для средства выбора времени вы можете использовать datePicker с дополнительным временем на выбор. Для получения дополнительной информации о 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);
    }

}

Чтобы использовать все, что вам нужно сделать, это создать новый компонент blazor и вставить весь код. Например, я создал файл ColorSelector.razor, и его можно использовать в своем проекте:

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

Вы можете сделать то же самое для DatePicker или других уже определенных компонентов 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; }
}

Использование компонентов:

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

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

Проект

Или радзен

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


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

Я был бы осторожен с настраиваемыми элементами управления. Предполагается, что браузеры на некоторых устройствах, особенно на телефонах, могут обрабатывать элементы управления html как угодно. Например, пользователь iPhone может быть ИСПОЛЬЗОВАН для ввода цвета с помощью определенного элемента управления, и ему может не понравиться, что вы переопределяете значение по умолчанию.

Вот проект, который показывает, как можно создать простое средство выбора времени:

https://github.com/pekspro/BlazorTimePicker

Затем вы можете использовать средство выбора времени следующим образом:

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

В том же проекте есть компонент Date, сочетающий в себе средство выбора времени и средство выбора даты, которое вы легко можете привязать к DateTime:

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