Tesserae

TimePicker

Description

The TimePicker component provides a native browser control for selecting a time. It stores the selected value as a DateTimeOffset and is useful for schedules, reminders, cut-off times, and other time-only inputs.

Usage

Create a TimePicker() with or without an initial value. You can combine it with min/max validation, browser fallback attributes, and change handlers.

time-picker-sample.js

using System;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var now = DateTimeOffset.Now;

            var component = Stack().Children(
                Label("Standard").SetContent(new TimePicker()),
                Label("Pre-selected").SetContent(new TimePicker(now)),
                Label("Browser fallback").SetContent(new TimePicker(now).WithBrowserFallback()),
                Label("Disabled").Disabled().SetContent(new TimePicker(now).Disabled()),
                new TimePicker(now).OnChange((s, e) =>
                    Toast().Information($"Selected: {s.Time:HH:mm:ss}"))
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Methods

WithBrowserFallback() adds a pattern attribute for browsers that need a graceful fallback.
Render() returns the underlying input element.

TimePicker also inherits the common picker helpers from MomentPickerBase, including methods such as SetStep(...), SetMin(...), SetMax(...), Disabled(...), validation helpers, and DOM event hooks.

Properties

Time gets the selected value as a DateTimeOffset.

Referenced by

date-time-picker