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

Interactive Selection with Live Feedback

This sample displays the most recently selected month and a running count of changes, demonstrating how OnChange can drive any downstream UI such as report filters or billing-period summaries.

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 readonly string[] _names = new[]
        {
            "January","February","March","April","May","June",
            "July","August","September","October","November","December"
        };

        private static void Main()
        {
            var today     = DateTime.Today;
            var selection = TextBlock($"{_names[today.Month - 1]} {today.Year}");
            var counter   = TextBlock("0");
            var changes   = 0;

            var picker = new MonthPicker((today.Year, today.Month))
                .OnChange((s, e) =>
                {
                    selection.Text($"{_names[s.Month.month - 1]} {s.Month.year}");
                    counter.Text((++changes).ToString());
                });

            var component = VStack().Children(
                Label("Pick a month:").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);
        }
    }
}