#MonthCalendar and DatePicker

A MonthCalendar is a month grid: a header with the month and the previous and next buttons, a row of day names, six weeks of days and a footer with Today (and Clear in Range and Multiple mode). A DatePicker is a BaseField<DateTime>: a text input and a button that opens a MonthCalendar popup.

<UIToolbox.DatePicker label="Due" date="2026-09-24" />
<UIToolbox.DatePicker label="ISO" format="yyyy-MM-dd" min-date="2026-01-01" max-date="2026-12-31" />
<UIToolbox.DatePicker label="Starts" show-time="true" />
<UIToolbox.DatePicker label="Stay" range="true" date="2026-09-24" range-end="2026-09-30" />
<UIToolbox.MonthCalendar selection-mode="Range" show-week-numbers="true" />
<UIToolbox.MonthCalendar selection-mode="Range" month-count="2" />

// A range in one field, with a list of presets at the side of the calendar
var period = new DatePicker("Period") { Range = true };
period.Calendar.MonthCount = 2;
period.Presets = new[]
{
    new DatePreset("Today", () => DateTime.Today),
    new DatePreset("Last 7 days", () => (DateTime.Today.AddDays(-6), DateTime.Today)),
    new DatePreset("This month", () =>
    {
        var first = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
        return (first, first.AddMonths(1).AddDays(-1));
    })
};
period.RangeChanged += (start, end) => Debug.Log($"{start:d} to {end:d}");

• In the calendar, Left and Right move one day, Up and Down one week, Page Up and Page Down one month, Home and End to the first and last day of the month. The gamepad directions move as the arrows. The keys skip dates that the user cannot pick. Tab leaves the calendar.
• Ctrl+Up shows the wider view (the months, then the years). In those views the arrows move a cursor, also to the year or the 12 years before and after, Page Up and Page Down change the year or the 12 years, and Enter, Space or Ctrl+Down opens the month or the year of the cursor.
• The months and the years outside MinDate and MaxDate are disabled. The Months and Years views do not change the value: only a click on a day does.
• The DatePicker popup has the same views.
• In Single mode the keys change the value. In Range and Multiple mode they move a cursor, and Enter or Space picks it.
• In Range mode the first pick sets the start, the second the end (the two are put in order), and a third starts a new range. In Multiple mode a pick adds or removes a date.
• The DatePicker popup shows in the nearest Workspace, as the SearchDropdown popup does. Down in the text opens it. A pick, Escape or a click outside closes it. With ShowTime, a pick keeps the time and the popup stays open, and a time change applies at once. In the popup the keys move the calendar only; Enter picks.
• With Range, the popup shows the range of the field. The first pick is the new start and the popup stays open. The second pick is the end, the two are put in order, and the popup closes. A change of the start is a ChangeEvent; a change of the start or the end is a RangeChanged.
• The range text is the two dates with " – " between them. A typed range can also have " - ". Both dates must be dates that the user can pick. A range has no time: ShowTime is not used.
• A click on a preset sets its date (without Range, the start of its range), or its range, and closes the popup. Tab moves from the calendar to the presets, and Enter or Space picks one. A gamepad does not reach the presets.
• Set Calendar.MonthCount to 2 for a range across a month end.
• A typed text that is not a date in Culture, or a date the user cannot pick, is ignored, and the text shows the value again. The text's own change event stops in the picker.
• UXML dates are strings. A DateTime UXML attribute needs a converter that is editor-only, and Unity cannot serialize DateTime, so the value would be lost at runtime.
• Saturday and Sunday get the weekend class in every culture.
• In Range mode, after the first pick, the days from the start to the day under the pointer get the --range-preview class. It looks like the range. When the pointer leaves the calendar, the keyboard cursor is the other end, so the arrows also show the preview. The second pick ends the preview.
• The month and day names come from Culture. Set the button texts for other languages; the arrows "‹" and "›" have no text to translate.

#Styling