Tesserae - Month Picker

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.

API reference

class

MonthPicker

public class MonthPicker : MomentPickerBase<MonthPicker, (int year, int month)>

A form input for picking a single calendar month (year + month), backed by the browser's native month input.

Constructors

Constructor

MonthPicker

public MonthPicker((int year, int month)? monthAndYear) : base("month", monthAndYear.HasValue ? FormatMonth(monthAndYear.Value) : string.Empty)

Initializes a new instance of this class.

Properties

Property

MonthPicker.Month

public (int year, int month) Month

Gets or sets the month.

Methods

Method

MonthPicker.WithBrowserFallback

public MonthPicker WithBrowserFallback()

Adds the pattern attribute to the underlying input element for graceful degradation when retrieving the user selected value on older browsers.

Returns

The current instance of the type.

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

Referenced by

DateRangePicker

MonthPicker

Description

API reference

Constructors

MonthPicker

Properties

MonthPicker.Month

Methods

MonthPicker.WithBrowserFallback

Returns

Samples

Basic MonthPicker

With Min / Max Constraints

Interactive Selection with Live Feedback

See also

Referenced by