Components

Day and time

A moment asked as a day and a time of that day, in one row: the day typed in the reader's own order or picked from the calendar, the time typed beside it. One DateTime? is bound, and the time goes beneath the day where the row has no room, as on a phone. Not one of Flux UI's components: Flux's own date picker and time picker, side by side.

A day and a time

The time waits for a day: with no day there is no time to give, and a day taken away takes its time with it. A first day is its first minute. The member is a DateTime? nothing requires, so the day has its clear button; half typed, the pair says so under it and the save is refused.

DayAndTimeExample.cs

using System.Globalization;

namespace Rask.Site.Features.UiDocs.Examples;

// One DateTime? in a form: the day typed or picked, the time beside it, and the time beneath where the row is narrow.
public sealed partial class DayAndTimeExample : Component
{
    private readonly Delivery _delivery = new();
    private string _said = "Nothing saved yet.";

    protected override Component? Render() =>
        Div.Class("space-y-3")[
            Form.Model(_delivery).OnSubmit(Save).Id("udt-form").Class("max-w-md space-y-6")[
                Ui.DayAndTime.Bind(() => _delivery.Arrives).Label("Arrives").Id("udt-arrives"),
                Ui.Button.Type(Ui.ButtonType.Submit).Primary["Save"]
            ],
            Ui.Text.Id("udt-said")[_said]
        ];

    private void Save(Delivery delivery) =>
        _said = delivery.Arrives is { } at ? "Saved " + at.ToString("yyyy-MM-dd HH:mm", CultureInfo.InvariantCulture) + "." : "Saved with no time.";

    public sealed class Delivery
    {
        public DateTime? Arrives { get; set; }
    }
}

Live result

Arrives

November 2026

Nothing saved yet.

Seconds kept

Typed in Hungarian, 2026. 11. 06., and required, so no clear button. The time field writes hours and minutes: a new day keeps the moment's time to the second, and a time left at the hour and minute it shows keeps the seconds too. Any other time has none.

DayAndTimeSecondsExample.cs

using System.ComponentModel.DataAnnotations;
using System.Globalization;

namespace Rask.Site.Features.UiDocs.Examples;

// A required moment with seconds, in Hungarian: a new day keeps 14:35:42, and a time left at 14:35 keeps the 42 seconds.
public sealed partial class DayAndTimeSecondsExample : Component
{
    private readonly Reading _reading = new();
    private string _said = "Nothing saved yet.";

    protected override Component? Render() =>
        Div.Class("space-y-3")[
            Form.Model(_reading).OnSubmit(Save).Id("udt-seconds-form").Class("max-w-md space-y-6")[
                Ui.DayAndTime.Bind(() => _reading.Taken).Locale("hu-HU").Label("Leolvasva").Id("udt-taken"),
                Ui.Button.Type(Ui.ButtonType.Submit).Primary["Mentés"]
            ],
            Ui.Text.Id("udt-seconds-said")[_said]
        ];

    private void Save(Reading reading) =>
        _said = "Saved " + reading.Taken?.ToString("yyyy-MM-dd HH:mm:ss", CultureInfo.InvariantCulture) + ".";

    public sealed class Reading
    {
        [Required]
        public DateTime? Taken { get; set; } = new DateTime(2026, 11, 6, 14, 35, 42, DateTimeKind.Unspecified);
    }
}

Live result

Leolvasva

. . .

2026. november

H	K	Sze	Cs	P	Szo	V

Nothing saved yet.

Reference

`Ui.DayAndTime`

not in Flux UI

A moment as Flux's typed date picker and time picker in one row. The time waits for a day, and goes beneath it where the row has no room.

Step	Takes	What it does
`.Bind(…)`	() => a DateTime? or a DateTime	The member it reads and writes: () => m.At, a DateTime? or a DateTime. Or Value with OnChange.
`.Value(…)`	T: a DateTime? or a DateTime	What it holds, for a page that holds it itself.
`.OnChange(…)`	a handler given the new value	Runs with the whole moment when the day or the time changes.
`.AfterBind(…)`	a handler given the new value	Runs after Bind has written the model.
`.Validate(…)`	a validator	A rule the moment is checked by when it is written; it speaks under the pair.
`.Live()`	`bool`	Writes the model as soon as the day or the time is given, not with the next action.
`.Label(…)`	`string`	Draws a field around the pair, with this label and the error under both.
`.Description(…)`	`string`	Help text between the label and the pair.
`.DescriptionTrailing(…)`	`string`	Help text under the pair.
`.Badge(…)`	`string`	A word beside the label: "Optional".
`.Disabled()`	`bool`	Takes no input, the day nor the time.
`.Invalid()`	`bool`	Error styling the form did not ask for.
`.Locale(…)`	`string`	The culture the day is typed and the time written in. The app's culture when unset.
`.ShowValidation()`	`bool`	False leaves the member's message to a Ui.Error placed elsewhere.