Tesserae

MonthPicker

Description

A control to select a year and month

MonthPicker lets users select a specific year and month using the browser's native month-input widget. It is ideal when day-level precision is unnecessary, such as selecting billing periods, report months, or subscription renewal dates.

The component surfaces the selected value as a typed (year, month) tuple, removing the need for manual string parsing.

Samples

Basic MonthPicker

month-picker-basic-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("Current Month").SetContent(
                    new MonthPicker((DateTime.Today.Year, DateTime.Today.Month))
                       .OnChange((s, e) => Toast().Information($"Selected: {s.Month.year}-{s.Month.month:D2}"))
                ),
                Label("No Default").SetContent(
                    new MonthPicker(null)
                       .OnChange((s, e) => Toast().Information($"Selected: {s.Month.year}-{s.Month.month:D2}"))
                ),
                Label("Disabled").Disabled().SetContent(
                    new MonthPicker((DateTime.Today.Year, DateTime.Today.Month)).Disabled()
                )
            );

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

With Min / Max Constraints

month-picker-min-max-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 minMonth = (year: DateTime.Today.Year - 1, month: 1);
            var maxMonth = (year: DateTime.Today.Year + 1, month: 12);

            var component = VStack().Children(
                Label($"Range: {minMonth.year}-{minMonth.Item2:D2} to {maxMonth.year}-{maxMonth.Item2:D2}").SetContent(
                    new MonthPicker((DateTime.Today.Year, DateTime.Today.Month))
                       .SetMin(minMonth)
                       .SetMax(maxMonth)
                       .OnChange((s, e) => Toast().Information($"Selected: {s.Month.year}-{s.Month.month:D2}"))
                )
            );

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

Event Handling

month-picker-event-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 MonthPicker((DateTime.Today.Year, DateTime.Today.Month))
               .OnChange((s, e) => Toast().Information($"Month changed to {s.Month.year}-{s.Month.month:D2}"));

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