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

Event Handling

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 component = new WeekPicker((DateTime.Today.Year, 1))
               .OnChange((s, e) => Toast().Information($"Week changed to {s.Week.year}-W{s.Week.weekNumber}"));

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