@pine-ds/core 4.9.1 → 4.11.0

package/dist/collection/components/pds-datepicker/pds-datepicker.js

@@ -3,11 +3,13 @@ import { autoUpdate, computePosition, flip, hide, offset, shift, size } from "@f
 import { calendarSimple, caretDown, caretLeft, caretRight, check, remove } from "@pine-ds/icons/icons";
 import { isSpecTest } from "../../utils/form";
 import { formatMessage, resolveLocale } from "../../i18n";
-import { addDays, addMonths, clampDate, dateFormatter, formatDate, isOutOfRange, isSameDay, localeFirstDayOfWeek, monthWeeks, parseIsoDate, supportedLocale, toIsoDate, today, weekdayColumn, weekdayNames, } from "./date-utils";
+import { addDays, addMonths, clampDate, dateFormatter, daysInMonth, formatDate, isOutOfRange, isSameDay, localeFirstDayOfWeek, inMonthDayYear, monthDayRows, monthWeeks, parseIsoDate, parseMonthDay, supportedLocale, toIsoDate, toMonthDay, today, weekdayColumn, weekdayNames, } from "./date-utils";
 import { CalendarPortal } from "./calendar-portal";
 import { matchPreset, presetInRange, resolvePresets } from "./presets";
-import { RANGE_SEPARATOR, clockFor, compareDateTime, fieldFormat, joinTime, parseDateTime, parseFieldText, parseRangeText, splitTime, toFieldText, toValueString, } from "./value";
+import { RANGE_SEPARATOR, clockFor, compareDateTime, fieldFormat, joinTime, monthDayFormat, parseDateTime, parseFieldText, parseMonthDayText, parseRangeText, splitTime, formatWith, toFieldText, toValueString, } from "./value";
 const FULL_DATE = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+/** A day in month-day mode, which has no year and so no weekday. */
+const MONTH_AND_DAY = { month: 'long', day: 'numeric' };
 const DEFAULT_START_TIME = '00:00';
 const DEFAULT_END_TIME = '23:59';
 /** Ids for datepickers without a `component-id`, so their calendars' ids stay unique. */
@@ -35,7 +37,8 @@ const dayNumberText = (formatter, date) => { var _a, _b; return (_b = (_a = form
 /**
  * A field for one date, or in range mode a start and end date, with a calendar to pick from.
  * The value is `YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` for a range; with the time picker, each
- * date carries a time, as `YYYY-MM-DDTHH:mm`.
+ * date carries a time, as `YYYY-MM-DDTHH:mm`. In month-day mode, for a date that comes round every
+ * year such as a birthday, it's a month and day with no year, as `--MM-DD`.
  *
  * @part calendar - The open calendar. It's portaled out of the datepicker, so style it with `.pds-datepicker-calendar-portal::part(calendar)`.
  * @part presets - The list of preset ranges in the calendar, styled with `.pds-datepicker-calendar-portal::part(presets)`.
@@ -90,8 +93,10 @@ export class PdsDatepicker {
          * in the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`
          * (24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,
          * `MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value
-         * and the change event stay ISO (`YYYY-MM-DD`), whatever the format. Typed ISO dates are always
-         * accepted too.
+         * and the change event stay ISO (`YYYY-MM-DD`; `--MM-DD` with `month-day`), whatever the format.
+         * Typed ISO dates are always accepted too. With `month-day`, a format without `YYYY` is taken as a
+         * month-and-day format and used as given, rather than reordered for the locale; leave it unset to
+         * follow the locale instead.
          */
         this.format = 'YYYY-MM-DD';
         /**
@@ -124,6 +129,15 @@ export class PdsDatepicker {
          * Accessible label for the month dropdown, when `show-dropdowns` is set.
          */
         this.monthLabel = 'Month';
+        /**
+         * Picks a month and day with no year, for a date that comes round every year, such as a birthday.
+         * The value is `--MM-DD` (ISO 8601 without a year), the field shows the date as the locale writes
+         * a month and day, and the calendar shows each month without a year or weekdays, with February
+         * always having its 29th. Turns off `range`, `time-picker`, `show-dropdowns`, `min` and `max`, and
+         * has no effect with `auto-apply`, `presets`, `first-day-of-week`, `min-date-message` or
+         * `max-date-message`, which all depend on them.
+         */
+        this.monthDay = false;
         /**
          * Accessible label for the button that shows the next month.
          */
@@ -172,7 +186,9 @@ export class PdsDatepicker {
         this.triggerLabel = 'Choose date';
         /**
          * The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with
-         * the time picker, each date as `YYYY-MM-DDTHH:mm`. An empty string when nothing is selected.
+         * the time picker, each date as `YYYY-MM-DDTHH:mm`; with `month-day`, the month and day with no
+         * year, as `--MM-DD` (a full date is read too, as that month and day, and rewritten to it). An
+         * empty string when nothing is selected.
          */
         this.value = '';
         /**
@@ -363,17 +379,17 @@ export class PdsDatepicker {
             // The times before the typed text changed them, for a pick in the calendar to go back to.
             (_b = this.timesBeforeTyping) !== null && _b !== void 0 ? _b : (this.timesBeforeTyping = [startTime, endTime]);
             this.loadDraft(parts);
-            if (this.timePicker) {
+            if (this.hasTime) {
                 // A time picked in the calendar survives typing that doesn't change the time: text with no
                 // time, as a date part-way typed, or with the time as committed.
                 const format = this.resolvedFormat;
                 const locale = this.resolvedLocale;
-                const typed = this.range ? parseRangeText(this.text, format, locale) : [parseFieldText(this.text, format, locale)];
+                const typed = this.isRange ? parseRangeText(this.text, format, locale) : [parseFieldText(this.text, format, locale)];
                 const committed = this.parsedValue();
                 const keeps = (i) => { var _a, _b, _c; return !((_a = typed === null || typed === void 0 ? void 0 : typed[i]) === null || _a === void 0 ? void 0 : _a.time) || ((_b = typed[i]) === null || _b === void 0 ? void 0 : _b.time) === ((_c = committed === null || committed === void 0 ? void 0 : committed[i]) === null || _c === void 0 ? void 0 : _c.time); };
                 if (keeps(0))
                     this.startTime = startTime;
-                if (this.range && keeps(1))
+                if (this.isRange && keeps(1))
                     this.endTime = endTime;
             }
             this.showDate(parts[parts.length - 1].date);
@@ -482,7 +498,8 @@ export class PdsDatepicker {
             if (!active)
                 return;
             const rtl = getComputedStyle(this.el).direction === 'rtl';
-            const column = weekdayColumn(active, this.weekStart);
+            // Month-day mode's rows start on the 1st, not on a weekday.
+            const column = this.monthDay ? (active.getUTCDate() - 1) % 7 : weekdayColumn(active, this.weekStart);
             let next = null;
             switch (event.key) {
                 case 'ArrowLeft':
@@ -500,14 +517,21 @@ export class PdsDatepicker {
                 case 'Home':
                     next = addDays(active, -column);
                     break;
-                case 'End':
-                    next = addDays(active, 6 - column);
+                case 'End': {
+                    // Month-day mode's rows don't carry into the next month, so End stops at the month's last day.
+                    const lastColumn = this.monthDay
+                        ? Math.min(6, daysInMonth(active.getUTCFullYear(), active.getUTCMonth()) - active.getUTCDate() + column)
+                        : 6;
+                    next = addDays(active, lastColumn - column);
                     break;
+                }
                 case 'PageUp':
-                    next = addMonths(active, event.shiftKey ? -12 : -1);
+                    // Month-day mode has no year to jump by, so Shift+PageUp stays put rather than passing
+                    // through a real, possibly non-leap year and clamping Feb 29 to the 28th.
+                    next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? -12 : -1);
                     break;
                 case 'PageDown':
-                    next = addMonths(active, event.shiftKey ? 12 : 1);
+                    next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? 12 : 1);
                     break;
                 case 'Enter':
                 case ' ':
@@ -520,9 +544,9 @@ export class PdsDatepicker {
                     return;
             }
             event.preventDefault();
-            const target = clampDate(next, this.minDate, this.maxDate);
+            const target = clampDate(this.inView(next), this.minDate, this.maxDate);
             this.showDate(target);
-            if (this.range)
+            if (this.isRange)
                 this.previewDate = toIsoDate(target);
             this.focusActiveDay = true;
         };
@@ -533,7 +557,7 @@ export class PdsDatepicker {
                 this.pickDate(date);
         };
         this.onGridPointerOver = (event) => {
-            if (!this.range || !this.draftStart || this.draftEnd)
+            if (!this.isRange || !this.draftStart || this.draftEnd)
                 return;
             const date = this.dayFromEvent(event);
             const iso = date && toIsoDate(date);
@@ -582,19 +606,28 @@ export class PdsDatepicker {
         var _a;
         this.text = this.fieldText();
         this.textError = '';
+        const parts = this.parsedValue();
+        // A full date reads as its month and day; keep what's submitted in step with what's shown,
+        // rather than passing through whichever spelling was set until the next pick rewrites it.
+        if (this.monthDay && parts) {
+            const normalized = this.dayValue(parts[0].date);
+            if (this.value !== normalized)
+                this.value = normalized;
+        }
         this.updateFormValue();
         if (!this.isOpen)
             return;
-        const parts = this.parsedValue();
         this.loadDraft(parts);
-        const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : today();
+        const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : this.now;
         this.showDate(clampDate(day, this.minDate, this.maxDate), true);
     }
     requiredChanged() {
         this.updateFormValue();
     }
     componentWillLoad() {
-        this.text = this.fieldText();
+        // Through the same path a later value/context change takes, so an initial full date in
+        // month-day mode submits normalized too, not only after the first pick rewrites it.
+        this.refreshFromValue();
     }
     connectedCallback() {
         if (this.el.attachInternals && !this.internals) {
@@ -644,10 +677,30 @@ export class PdsDatepicker {
         return localeFirstDayOfWeek(this.resolvedLocale);
     }
     get minDate() {
-        return parseIsoDate(this.min);
+        return this.monthDay ? null : parseIsoDate(this.min);
     }
     get maxDate() {
-        return parseIsoDate(this.max);
+        return this.monthDay ? null : parseIsoDate(this.max);
+    }
+    /** Range mode, which month-day mode turns off. */
+    get isRange() {
+        return this.range && !this.monthDay;
+    }
+    /** The time picker, which month-day mode turns off. */
+    get hasTime() {
+        return this.timePicker && !this.monthDay;
+    }
+    /** Today, or in month-day mode today's month and day. */
+    get now() {
+        return this.monthDay ? inMonthDayYear(today()) : today();
+    }
+    /** In month-day mode, a date moved to the mode's year, as when the calendar wraps past December. */
+    inView(date) {
+        return this.monthDay ? inMonthDayYear(date) : date;
+    }
+    /** One day as the value holds it: `YYYY-MM-DD`, or `--MM-DD` in month-day mode. */
+    dayValue(date) {
+        return this.monthDay ? toMonthDay(date) : toIsoDate(date);
     }
     get isInteractive() {
         return !this.disabled && !this.readonly;
@@ -655,22 +708,22 @@ export class PdsDatepicker {
     /** How many months the calendar shows side by side. */
     get monthCount() {
         const narrow = typeof window !== 'undefined' && window.innerWidth < TWO_MONTHS_MIN_WIDTH;
-        return this.range && !narrow ? 2 : 1;
+        return this.isRange && !narrow ? 2 : 1;
     }
     /** Whether picks apply at once, without the footer: `auto-apply` in range mode, without times. */
     get appliesOnPick() {
-        return this.range && this.autoApply && !this.timePicker;
+        return this.isRange && this.autoApply && !this.hasTime;
     }
     /** Whether picks wait for Apply: for a range, unless it auto-applies, and for a date with a time. */
     get hasFooter() {
-        return (this.range || this.timePicker) && !this.appliesOnPick;
+        return (this.isRange || this.hasTime) && !this.appliesOnPick;
     }
     get resolvedPresets() {
-        return this.range ? resolvePresets(this.presets, today()) : [];
+        return this.isRange ? resolvePresets(this.presets, today()) : [];
     }
     /** The committed value, parsed: one date, or a range's start and end. */
     parsedValue(value = this.value) {
-        if (this.range) {
+        if (this.isRange) {
             const [start, end, extra] = (value !== null && value !== void 0 ? value : '').split('/');
             const startValue = parseDateTime(start);
             const endValue = parseDateTime(end);
@@ -678,12 +731,22 @@ export class PdsDatepicker {
                 ? [startValue, endValue]
                 : null;
         }
+        if (this.monthDay) {
+            const date = parseMonthDay(value);
+            return date ? [{ date, time: null }] : null;
+        }
         const single = parseDateTime(value);
         return single ? [single] : null;
     }
     /** The format the field shows and reads, with a time when the time picker is on. */
     get resolvedFormat() {
-        return fieldFormat(this.format, this.timePicker, this.timePicker && clockFor(this.resolvedLocale).hour12);
+        var _a, _b;
+        if (this.monthDay) {
+            // A format with a year is the default, or one for full dates: use the locale's month and day.
+            const format = (_b = (_a = this.format) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+            return format !== '' && !/YYYY/.test(format.replace(/\[[^\]]*\]/g, '')) ? format : monthDayFormat(this.resolvedLocale);
+        }
+        return fieldFormat(this.format, this.hasTime, this.hasTime && clockFor(this.resolvedLocale).hour12);
     }
     /** What the field shows for the committed value. */
     fieldText() {
@@ -699,20 +762,24 @@ export class PdsDatepicker {
     /** Drops a time the time picker doesn't show, or adds the default one it does. */
     withTimePicker(value, fallback = DEFAULT_START_TIME) {
         var _a;
-        return { date: value.date, time: this.timePicker ? ((_a = value.time) !== null && _a !== void 0 ? _a : fallback) : null };
+        return { date: value.date, time: this.hasTime ? ((_a = value.time) !== null && _a !== void 0 ? _a : fallback) : null };
     }
     get fieldPlaceholder() {
         if (this.placeholder)
             return this.placeholder;
+        // Month-day tokens, as `MMMM D`, don't read as a hint; an example date does.
+        if (this.monthDay) {
+            return formatWith({ date: parseMonthDay('--12-31'), time: null }, this.resolvedFormat, this.resolvedLocale);
+        }
         const one = this.resolvedFormat;
-        return this.range ? `${one}${RANGE_SEPARATOR}${one}` : one;
+        return this.isRange ? `${one}${RANGE_SEPARATOR}${one}` : one;
     }
     /** Loads the committed value into the draft the calendar edits. */
     loadDraft(parts) {
         var _a, _b;
         const [start, end] = parts !== null && parts !== void 0 ? parts : [];
         this.draftStart = start ? toIsoDate(start.date) : '';
-        this.draftEnd = this.range && end ? toIsoDate(end.date) : '';
+        this.draftEnd = this.isRange && end ? toIsoDate(end.date) : '';
         this.startTime = (_a = start === null || start === void 0 ? void 0 : start.time) !== null && _a !== void 0 ? _a : DEFAULT_START_TIME;
         this.endTime = (_b = end === null || end === void 0 ? void 0 : end.time) !== null && _b !== void 0 ? _b : DEFAULT_END_TIME;
         this.previewDate = '';
@@ -728,7 +795,7 @@ export class PdsDatepicker {
         const parts = this.parsedValue();
         this.loadDraft(parts);
         this.valueAtOpen = (_a = this.value) !== null && _a !== void 0 ? _a : '';
-        const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b : today();
+        const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b : this.now;
         this.showDate(clampDate(start, this.minDate, this.maxDate), true);
         this.focusActiveDay = focusDay;
         this.isOpen = true;
@@ -750,7 +817,8 @@ export class PdsDatepicker {
      * Makes a day the active one and brings it into view. With two months, a day already on view
      * doesn't move the view; `reset` lines the view up so the day is in the last month shown.
      */
-    showDate(date, reset = false) {
+    showDate(day, reset = false) {
+        const date = this.inView(day);
         const first = firstOfMonth(date);
         const view = parseIsoDate(this.viewMonth);
         const lastView = view && addMonths(view, this.monthCount - 1);
@@ -768,15 +836,15 @@ export class PdsDatepicker {
         // A pick in the calendar takes over from typed text, so dismissing afterwards commits nothing,
         // as when nothing was typed.
         this.dropTypedText();
-        if (this.range) {
+        if (this.isRange) {
             this.pickRangeDay(date);
         }
-        else if (this.timePicker) {
+        else if (this.hasTime) {
             this.draftStart = toIsoDate(date);
             this.activeDate = this.draftStart;
         }
         else {
-            this.commitValue(toIsoDate(date));
+            this.commitValue(this.dayValue(date));
             this.closeCalendar(true);
         }
     }
@@ -820,7 +888,11 @@ export class PdsDatepicker {
     }
     /** Commits one date, or a range with its start, end and matching preset. */
     commitParts(parts) {
-        if (!this.range) {
+        if (this.monthDay) {
+            this.commitValue(toMonthDay(parts[0].date));
+            return;
+        }
+        if (!this.isRange) {
             this.commitValue(toValueString(parts[0]));
             return;
         }
@@ -835,7 +907,7 @@ export class PdsDatepicker {
         if (!startDate)
             return null;
         const start = this.withTimePicker({ date: startDate, time: this.startTime });
-        if (!this.range)
+        if (!this.isRange)
             return [start];
         const end = this.withTimePicker({ date: (_a = parseIsoDate(this.draftEnd)) !== null && _a !== void 0 ? _a : startDate, time: this.endTime });
         // An end time before the start time on the same day ends at the start.
@@ -961,7 +1033,11 @@ export class PdsDatepicker {
     readText(text) {
         const format = this.resolvedFormat;
         const locale = this.resolvedLocale;
-        const parts = this.range ? parseRangeText(text, format, locale) : [parseFieldText(text, format, locale)];
+        const parts = this.monthDay
+            ? [parseMonthDayText(text, format, locale)]
+            : this.isRange
+                ? parseRangeText(text, format, locale)
+                : [parseFieldText(text, format, locale)];
         if (!parts || parts.some((part) => !part))
             return null;
         return parts.map((part, i) => this.withTimePicker(part, i === 1 ? DEFAULT_END_TIME : DEFAULT_START_TIME));
@@ -1005,17 +1081,17 @@ export class PdsDatepicker {
     /** Whether the month before (`-1`) or after (`1`) the ones on view has a day in range. */
     canShowMonth(direction) {
         var _a;
-        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : today();
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
         if (direction < 0)
             return !this.minDate || addDays(view, -1) >= this.minDate;
         return !this.maxDate || addMonths(view, this.monthCount) <= this.maxDate;
     }
     showMonth(event, direction) {
         var _a, _b;
-        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : today();
-        const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b : today();
-        this.viewMonth = toIsoDate(addMonths(view, direction));
-        this.activeDate = toIsoDate(clampDate(addMonths(active, direction), this.minDate, this.maxDate));
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
+        const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b : this.now;
+        this.viewMonth = toIsoDate(this.inView(addMonths(view, direction)));
+        this.activeDate = toIsoDate(clampDate(this.inView(addMonths(active, direction)), this.minDate, this.maxDate));
         if (this.canShowMonth(direction)) {
             // Safari doesn't focus a clicked button; without this, focus falls to the page and Escape and
             // the Tab trap stop working.
@@ -1137,7 +1213,7 @@ export class PdsDatepicker {
         const parts = this.parsedValue();
         if (!parts)
             return this.triggerLabel;
-        const dates = parts.map((part) => formatDate(part.date, locale, FULL_DATE));
+        const dates = parts.map((part) => formatDate(part.date, locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE));
         return `${this.triggerLabel}, ${dates.join(RANGE_SEPARATOR)}`;
     }
     /** The range to highlight: the chosen one, or the start to the previewed day while picking the end. */
@@ -1151,15 +1227,15 @@ export class PdsDatepicker {
     }
     /** The day shown as selected: the draft, which opens as the committed day and follows typing. */
     selectedDay() {
-        if (this.range)
+        if (this.isRange)
             return null;
         return parseIsoDate(this.draftStart);
     }
     renderMonthHeading(view, index, locale, headingId) {
-        const heading = formatDate(view, locale, { month: 'long', year: 'numeric' });
+        const heading = formatDate(view, locale, this.monthDay ? { month: 'long' } : { month: 'long', year: 'numeric' });
         // Only the first month announces itself as it changes; two months move together.
         const live = index === 0 ? 'polite' : null;
-        if (!this.showDropdowns) {
+        if (!this.showDropdowns || this.monthDay) {
             return (h("div", { class: "pds-datepicker__heading", id: headingId, "aria-live": live }, heading));
         }
         const year = view.getUTCFullYear();
@@ -1185,14 +1261,14 @@ export class PdsDatepicker {
         const min = this.minDate;
         const max = this.maxDate;
         const selected = this.selectedDay();
-        const [rangeStart, rangeEnd] = this.range ? this.highlightedRange() : [null, null];
-        const now = today();
-        const fullDate = dateFormatter(locale, FULL_DATE);
+        const [rangeStart, rangeEnd] = this.isRange ? this.highlightedRange() : [null, null];
+        const now = this.now;
+        const fullDate = dateFormatter(locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE);
         const dayNumber = dateFormatter(locale, { day: 'numeric' });
         const headingId = `${this.baseId}-calendar-heading-${index}`;
         const isFirst = index === 0;
         const isLast = index === this.monthCount - 1;
-        return (h("div", { class: "pds-datepicker__month" }, h("div", { class: "pds-datepicker__header" }, isFirst ? (h("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--previous", "aria-label": this.previousMonthLabel, disabled: !this.canShowMonth(-1), onClick: (event) => this.showMonth(event, -1) }, h("pds-icon", { icon: caretLeft, "aria-hidden": "true" }))) : (h("span", { class: "pds-datepicker__nav-spacer" })), this.renderMonthHeading(view, index, locale, headingId), isLast ? (h("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--next", "aria-label": this.nextMonthLabel, disabled: !this.canShowMonth(1), onClick: (event) => this.showMonth(event, 1) }, h("pds-icon", { icon: caretRight, "aria-hidden": "true" }))) : (h("span", { class: "pds-datepicker__nav-spacer" }))), h("table", { class: "pds-datepicker__grid", role: "grid", "aria-labelledby": headingId, "aria-multiselectable": this.range ? 'true' : null, onKeyDown: this.onGridKeyDown, onClick: this.onGridClick, onPointerOver: this.onGridPointerOver }, h("thead", null, h("tr", null, weekdayNames(locale, this.weekStart).map((name) => (h("th", { scope: "col", class: "pds-datepicker__weekday" }, h("span", { "aria-hidden": "true" }, name.short), h("span", { class: "visually-hidden" }, name.long)))))), h("tbody", null, monthWeeks(year, month, this.weekStart).map((week) => (h("tr", null, week.map((date, column) => {
+        return (h("div", { class: "pds-datepicker__month" }, h("div", { class: "pds-datepicker__header" }, isFirst ? (h("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--previous", "aria-label": this.previousMonthLabel, disabled: !this.canShowMonth(-1), onClick: (event) => this.showMonth(event, -1) }, h("pds-icon", { icon: caretLeft, "aria-hidden": "true" }))) : (h("span", { class: "pds-datepicker__nav-spacer" })), this.renderMonthHeading(view, index, locale, headingId), isLast ? (h("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--next", "aria-label": this.nextMonthLabel, disabled: !this.canShowMonth(1), onClick: (event) => this.showMonth(event, 1) }, h("pds-icon", { icon: caretRight, "aria-hidden": "true" }))) : (h("span", { class: "pds-datepicker__nav-spacer" }))), h("table", { class: "pds-datepicker__grid", role: "grid", "aria-labelledby": headingId, "aria-multiselectable": this.isRange ? 'true' : null, onKeyDown: this.onGridKeyDown, onClick: this.onGridClick, onPointerOver: this.onGridPointerOver }, !this.monthDay && (h("thead", null, h("tr", null, weekdayNames(locale, this.weekStart).map((name) => (h("th", { scope: "col", class: "pds-datepicker__weekday" }, h("span", { "aria-hidden": "true" }, name.short), h("span", { class: "visually-hidden" }, name.long))))))), h("tbody", null, (this.monthDay ? monthDayRows(month) : monthWeeks(year, month, this.weekStart)).map((week) => (h("tr", null, week.map((date, column) => {
             if (!date)
                 return h("td", { class: "pds-datepicker__day pds-datepicker__day--empty" });
             const iso = toIsoDate(date);
@@ -1214,14 +1290,14 @@ export class PdsDatepicker {
                     'pds-datepicker__day--today': isToday,
                     'pds-datepicker__day--disabled': unavailable,
                 }, "data-date": iso, tabindex: iso === this.activeDate ? '0' : '-1', "aria-label": fullDate.format(date), "aria-selected": isSelected ? 'true' : null, "aria-current": isToday ? 'date' : null, "aria-disabled": unavailable ? 'true' : null }, dayNumberText(dayNumber, date)));
-        })))))), this.timePicker && this.timesUnderMonth(index).map((which) => this.renderTime(which, locale))));
+        })))))), this.hasTime && this.timesUnderMonth(index).map((which) => this.renderTime(which, locale))));
     }
     /**
      * The time pickers under a month: the start time under the first and the end time under the
      * second, or both under the one month a narrow range shows.
      */
     timesUnderMonth(index) {
-        if (!this.range)
+        if (!this.isRange)
             return ['start'];
         if (this.monthCount === 1)
             return ['start', 'end'];
@@ -1246,7 +1322,7 @@ export class PdsDatepicker {
             if (this.timesBeforeTyping)
                 this.timesBeforeTyping[which === 'start' ? 0 : 1] = time;
         };
-        const groupLabel = !this.range ? this.timeLabel : which === 'start' ? this.startTimeLabel : this.endTimeLabel;
+        const groupLabel = !this.isRange ? this.timeLabel : which === 'start' ? this.startTimeLabel : this.endTimeLabel;
         const isPm = hours >= 12;
         const hourOptions = clock.hour12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
         const shownHour = clock.hour12 ? hours % 12 || 12 : hours;
@@ -1287,7 +1363,7 @@ export class PdsDatepicker {
             return '';
         const format = this.resolvedFormat;
         const locale = this.resolvedLocale;
-        if (this.range && !this.draftEnd)
+        if (this.isRange && !this.draftEnd)
             return `${toFieldText(parts[0], format, locale)}${RANGE_SEPARATOR}`;
         return parts.map((part) => toFieldText(part, format, locale)).join(RANGE_SEPARATOR);
     }
@@ -1298,25 +1374,25 @@ export class PdsDatepicker {
     }
     renderCalendar(locale) {
         var _a;
-        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : today();
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
         const months = Array.from({ length: this.monthCount }, (_, i) => addMonths(view, i));
-        return (h("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.range }, id: `${this.baseId}-calendar`, role: "dialog",
+        return (h("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.isRange }, id: `${this.baseId}-calendar`, role: "dialog",
             // A click on a part that can't take focus, as the month heading, focuses the dialog
             // rather than dropping focus to the page, which would report blur mid-selection.
-            tabindex: "-1", "aria-labelledby": this.range ? null : `${this.baseId}-calendar-heading-0`, "aria-label": this.range ? this.label || this.triggerLabel : null, part: "calendar", ref: (el) => (this.dialogEl = el), onKeyDown: this.onDialogKeyDown, onFocusin: this.onCalendarFocusIn, onFocusout: this.onCalendarFocusOut }, this.range && this.renderPresets(), h("div", { class: "pds-datepicker__panel" }, h("div", { class: "pds-datepicker__months" }, months.map((month, index) => this.renderMonth(month, index, locale))), this.hasFooter && this.renderFooter(), this.appliesOnPick && (
+            tabindex: "-1", "aria-labelledby": this.isRange ? null : `${this.baseId}-calendar-heading-0`, "aria-label": this.isRange ? this.label || this.triggerLabel : null, part: "calendar", ref: (el) => (this.dialogEl = el), onKeyDown: this.onDialogKeyDown, onFocusin: this.onCalendarFocusIn, onFocusout: this.onCalendarFocusOut }, this.isRange && this.renderPresets(), h("div", { class: "pds-datepicker__panel" }, h("div", { class: "pds-datepicker__months" }, months.map((month, index) => this.renderMonth(month, index, locale))), this.hasFooter && this.renderFooter(), this.appliesOnPick && (
         // With no footer, still announce the start once it's picked, so it's clear an end comes next.
         h("span", { class: "visually-hidden", "aria-live": "polite" }, this.selectionText())))));
     }
     render() {
         const locale = this.resolvedLocale;
-        return (h(Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, h("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (h("button", {
+        return (h(Host, { key: '7c5388369fe78becfd26b0807f1c6cb54c7934a1', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, h("pds-input", { key: 'fc565c99359715415886ae63ef1bcbf8671569c9', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (h("button", {
             // Keyed, as is the calendar button: when Clear appears after a pick, the focused
             // calendar button must stay that button rather than be reused as Clear.
             key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
             // Out of the tab order, as a native search field's clear button is: Tab from a field
             // just emptied would land on it as the change removes it, dropping focus to the page.
             tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
-        }, h("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: remove, "aria-hidden": "true" }))), h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
+        }, h("pds-icon", { key: '6a7da726d86654d3598f84b8ea7a8ed244a8e5da', icon: remove, "aria-hidden": "true" }))), h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("pds-icon", { key: '92af87e66b7bb2e95861b873077a7bfb0268c2e0', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
     }
     static get is() { return "pds-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -1561,7 +1637,7 @@ export class PdsDatepicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "How the field shows dates and reads typed ones, as tokens: `YYYY`, `MMMM` or `MMM` (month name,\nin the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`\n(24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,\n`MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value\nand the change event stay ISO (`YYYY-MM-DD`), whatever the format. Typed ISO dates are always\naccepted too."
+                    "text": "How the field shows dates and reads typed ones, as tokens: `YYYY`, `MMMM` or `MMM` (month name,\nin the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`\n(24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,\n`MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value\nand the change event stay ISO (`YYYY-MM-DD`; `--MM-DD` with `month-day`), whatever the format.\nTyped ISO dates are always accepted too. With `month-day`, a format without `YYYY` is taken as a\nmonth-and-day format and used as given, rather than reordered for the locale; leave it unset to\nfollow the locale instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -1861,6 +1937,26 @@ export class PdsDatepicker {
                 "attribute": "month-label",
                 "defaultValue": "'Month'"
             },
+            "monthDay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Picks a month and day with no year, for a date that comes round every year, such as a birthday.\nThe value is `--MM-DD` (ISO 8601 without a year), the field shows the date as the locale writes\na month and day, and the calendar shows each month without a year or weekdays, with February\nalways having its 29th. Turns off `range`, `time-picker`, `show-dropdowns`, `min` and `max`, and\nhas no effect with `auto-apply`, `presets`, `first-day-of-week`, `min-date-message` or\n`max-date-message`, which all depend on them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month-day",
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -1932,7 +2028,7 @@ export class PdsDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies a short hint that describes the expected value of the field. Defaults to the format\nthe field takes, such as `YYYY-MM-DD`."
+                    "text": "Specifies a short hint that describes the expected value of the field. Defaults to the format\nthe field takes, such as `YYYY-MM-DD`; with `month-day`, to an example date instead, such as\n`December 31`."
                 },
                 "getter": false,
                 "setter": false,
@@ -2202,7 +2298,7 @@ export class PdsDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with\nthe time picker, each date as `YYYY-MM-DDTHH:mm`. An empty string when nothing is selected."
+                    "text": "The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with\nthe time picker, each date as `YYYY-MM-DDTHH:mm`; with `month-day`, the month and day with no\nyear, as `--MM-DD` (a full date is read too, as that month and day, and rewritten to it). An\nempty string when nothing is selected."
                 },
                 "getter": false,
                 "setter": false,
@@ -2383,6 +2479,9 @@ export class PdsDatepicker {
             }, {
                 "propName": "range",
                 "methodName": "contextChanged"
+            }, {
+                "propName": "monthDay",
+                "methodName": "contextChanged"
             }, {
                 "propName": "min",
                 "methodName": "contextChanged"

package/dist/collection/components/pds-datepicker/stories/pds-datepicker.stories.js

@@ -17,6 +17,7 @@ export default {
     max: null,
     min: null,
     minuteIncrement: 1,
+    monthDay: false,
     name: null,
     presets: null,
     range: false,
@@ -66,6 +67,7 @@ const BaseTemplate = (args) => html`<pds-datepicker
   max=${ifDefined(args.max ?? undefined)}
   min=${ifDefined(args.min ?? undefined)}
   minute-increment=${ifDefined(args.minuteIncrement ?? undefined)}
+  ?month-day=${args.monthDay}
   name=${ifDefined(args.name ?? undefined)}
   placeholder=${ifDefined(args.placeholder ?? undefined)}
   placement=${ifDefined(args.placement ?? undefined)}
@@ -161,6 +163,15 @@ MonthAndYearDropdowns.args = {
   showDropdowns: true,
 };
 
+export const MonthDay = BaseTemplate.bind({});
+MonthDay.args = {
+  componentId: 'pds-datepicker-month-day-example',
+  format: null,
+  label: 'Birthday',
+  monthDay: true,
+  value: '--11-07',
+};
+
 export const InitiallyEmptyWithClear = BaseTemplate.bind({});
 InitiallyEmptyWithClear.args = {
   clearable: true,