Tesserae

WeekPicker

Description

A control to select an ISO week number

WeekPicker lets users choose a specific ISO week within a year using the browser's native week-input widget. It surfaces the selection as a typed (year, weekNumber) tuple.

It is well-suited for scheduling, sprint planning, payroll cycles, or any reporting context that aligns to week boundaries rather than individual days or months.

Samples

Basic WeekPicker

week-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 component = VStack().Children(
                Label("Week 1 of This Year").SetContent(
                    new WeekPicker((DateTime.Today.Year, 1))
                       .OnChange((s, e) => Toast().Information($"Selected: {s.Week.year}-W{s.Week.weekNumber}"))
                ),
                Label("No Default").SetContent(
                    new WeekPicker(null)
                       .OnChange((s, e) => Toast().Information($"Selected: {s.Week.year}-W{s.Week.weekNumber}"))
                ),
                Label("Disabled").Disabled().SetContent(
                    new WeekPicker((DateTime.Today.Year, 1)).Disabled()
                )
            );

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

With Min / Max Constraints

week-picker-2-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 minWeek = (year: DateTime.Today.Year, week: 1);
            var maxWeek = (year: DateTime.Today.Year, week: 52);

            var component = Label($"Range: {minWeek.year}-W{minWeek.week} to {maxWeek.year}-W{maxWeek.week}").SetContent(
                new WeekPicker((DateTime.Today.Year, 1))
                   .SetMin(minWeek)
                   .SetMax(maxWeek)
                   .OnChange((s, e) => Toast().Information($"Selected: {s.Week.year}-W{s.Week.weekNumber}"))
            );

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

Interactive Selection with Live Feedback

Selecting a week updates the displayed label immediately via the OnChange event — useful as a starting point for hooking the picker into report filters, sprint summaries, or any other downstream UI.

week-picker-3-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 today = DateTime.Today;
            var selection = TextBlock($"{today.Year}-W01");
            var counter   = TextBlock("0");
            var changes   = 0;

            var picker = new WeekPicker((today.Year, 1))
                .OnChange((s, e) =>
                {
                    selection.Text($"{s.Week.year}-W{s.Week.weekNumber:D2}");
                    counter.Text((++changes).ToString());
                });

            var component = VStack().Children(
                Label("Pick a week:").SetContent(picker),
                HStack().PT(12).Children(
                    Label("Selected: ").SetContent(selection)
                ),
                HStack().Children(
                    Label("Changes fired: ").SetContent(counter)
                )
            ).Padding(16.px());

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