@design.estate/dees-catalog 9.6.0 → 9.7.0

package/ts_web/elements/00group-input/dees-input-datepicker/component.ts

@@ -9,6 +9,7 @@ import { demoFunc } from './demo.js';
 import { datepickerStyles } from './styles.js';
 import { renderDatepicker } from './template.js';
 import { DeesInputDatepickerPopup } from './datepicker-popup.js';
+import { createCalendarDate, dateValidationMessage, parseDateFields, parseDateValue } from './date-validation.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-layout/dees-label/dees-label.js';
 
@@ -78,6 +79,17 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
   @state()
   accessor selectedMinute: number = 0;
 
+  /** Uncommitted text stays visible even when it cannot be represented by value. */
+  @state()
+  accessor draftText: string | null = null;
+
+  @state()
+  accessor validationText = '';
+
+  public get validationState(): 'invalid' | 'valid' { return this.validationText ? 'invalid' : 'valid'; }
+
+  private lastCommittedValue: string | undefined;
+
   private popupInstance: DeesInputDatepickerPopup | null = null;
 
   public static styles = datepickerStyles;
@@ -86,42 +98,59 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
     return renderDatepicker(this);
   }
 
-  async firstUpdated() {
-    if (!this.value) {
-      this.value = '';
+  public willUpdate(changed: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changed);
+    if (changed.has('value') && this.value !== this.lastCommittedValue) {
+      this.syncValue(this.value);
     }
+  }
 
-    if (this.value) {
-      try {
-        const date = new Date(this.value);
-        if (!isNaN(date.getTime())) {
-          this.selectedDate = date;
-          this.viewDate = new Date(date);
-          this.selectedHour = date.getHours();
-          this.selectedMinute = date.getMinutes();
-        }
-      } catch {
-        // Invalid date
+  public updated(changed: Map<string, unknown>): void {
+    super.updated(changed);
+    if (changed.has('disabled') && this.disabled) this.closePopup();
+    if (['value', 'minDate', 'maxDate', 'disabledDates', 'required', 'disabled'].some(key => changed.has(key))) {
+      this.updateValidation(this.currentValidationMessage());
+    }
+    if (this.popupInstance) {
+      this.popupInstance.minDate = this.minDate;
+      this.popupInstance.maxDate = this.maxDate;
+      this.popupInstance.disabledDates = this.disabledDates;
+      if (changed.has('selectedDate')) {
+        this.popupInstance.selectedDate = this.selectedDate;
+        this.popupInstance.viewDate = new Date(this.viewDate);
+        this.popupInstance.selectedHour = this.selectedHour;
+        this.popupInstance.selectedMinute = this.selectedMinute;
       }
-    } else {
-      const now = new Date();
-      this.viewDate = new Date(now);
-      this.selectedHour = now.getHours();
-      this.selectedMinute = 0;
+    }
+    const input = this.shadowRoot?.querySelector('input');
+    input?.setCustomValidity(this.disabled ? '' : this.validationText);
+    if (input && (changed.has('draftText') || changed.has('value'))) {
+      const display = this.draftText ?? this.formatDate(this.value);
+      if (input.value !== display) input.value = display;
     }
   }
 
+  private syncValue(value: string | null): void {
+    this.value = value ?? '';
+    this.lastCommittedValue = this.value;
+    this.draftText = null;
+    this.selectedDate = parseDateValue(this.value);
+    this.viewDate = new Date(this.selectedDate ?? new Date());
+    this.selectedHour = this.selectedDate?.getHours() ?? 0;
+    this.selectedMinute = this.selectedDate?.getMinutes() ?? 0;
+  }
+
   public formatDate(isoString: string): string {
     if (!isoString) return '';
 
     try {
-      const date = new Date(isoString);
-      if (isNaN(date.getTime())) return '';
+      const date = parseDateValue(isoString);
+      if (!date) return isoString;
 
       let formatted = this.dateFormat;
       const day = date.getDate().toString().padStart(2, '0');
       const month = (date.getMonth() + 1).toString().padStart(2, '0');
-      const year = date.getFullYear().toString();
+      const year = date.getFullYear().toString().padStart(4, '0');
 
       formatted = formatted.replace('YYYY', year);
       formatted = formatted.replace('YY', year.slice(-2));
@@ -171,7 +200,7 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
     const opensToTop = spaceBelow < 400 && spaceAbove > spaceBelow;
 
     if (!this.popupInstance) {
-      this.popupInstance = new DeesInputDatepickerPopup();
+      this.popupInstance = document.createElement('dees-input-datepicker-popup');
     }
 
     // Configure popup
@@ -204,31 +233,50 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
 
   private closePopup(): void {
     this.isOpened = false;
-    if (this.popupInstance) {
-      this.popupInstance.removeEventListener('date-selected', this.handleDateSelected);
-      this.popupInstance.removeEventListener('date-cleared', this.handleDateCleared);
-      this.popupInstance.removeEventListener('close-request', this.handleCloseRequest);
-      this.popupInstance.removeEventListener('reposition-request', this.handleRepositionRequest);
-      this.popupInstance.hide();
+    const popup = this.popupInstance;
+    this.popupInstance = null;
+    if (popup) {
+      popup.removeEventListener('date-selected', this.handleDateSelected);
+      popup.removeEventListener('date-cleared', this.handleDateCleared);
+      popup.removeEventListener('close-request', this.handleCloseRequest);
+      popup.removeEventListener('reposition-request', this.handleRepositionRequest);
+      void popup.hide();
     }
   }
 
   private handleDateSelected = (event: Event): void => {
-    const date = (event as CustomEvent).detail as Date;
-    this.selectedDate = date;
-    this.selectedHour = date.getHours();
-    this.selectedMinute = date.getMinutes();
-    this.viewDate = new Date(date);
-    this.value = this.formatValueWithTimezone(date);
-    this.changeSubject.next(this);
+    if (this.disabled) return;
+    this.commitDate((event as CustomEvent<Date>).detail, true);
   };
 
   private handleDateCleared = (): void => {
-    this.value = '';
-    this.selectedDate = null;
-    this.changeSubject.next(this);
+    if (!this.disabled) this.commitClear();
   };
 
+  private commitDate(date: Date, normalizeDraft: boolean): boolean {
+    const message = dateValidationMessage(date, this);
+    if (message) { this.updateValidation(message); return false; }
+    const value = this.formatValueWithTimezone(date);
+    const changed = value !== this.value;
+    this.lastCommittedValue = value;
+    this.value = value;
+    this.selectedDate = new Date(date);
+    this.selectedHour = date.getHours();
+    this.selectedMinute = date.getMinutes();
+    this.viewDate = new Date(date);
+    if (normalizeDraft) this.draftText = null;
+    this.updateValidation('');
+    if (changed) this.changeSubject.next(this);
+    return true;
+  }
+
+  private commitClear(): void {
+    const changed = Boolean(this.value);
+    this.syncValue('');
+    this.updateValidation(this.currentValidationMessage());
+    if (changed) this.changeSubject.next(this);
+  }
+
   private handleCloseRequest = (): void => {
     this.closePopup();
   };
@@ -251,11 +299,17 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
   };
 
   public handleKeydown(e: KeyboardEvent): void {
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (this.disabled || e.isComposing) return;
+    if (e.key === 'Enter') {
       e.preventDefault();
-      this.toggleCalendar();
+      if (this.draftText !== null) this.commitManualInput(true);
+      else void this.toggleCalendar();
+    } else if (e.key === 'ArrowDown' && e.altKey) {
+      e.preventDefault();
+      if (!this.isOpened) void this.toggleCalendar();
     } else if (e.key === 'Escape' && this.isOpened) {
       e.preventDefault();
+      e.stopPropagation();
       this.closePopup();
     }
   }
@@ -270,107 +324,73 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
 
   public clearValue(e: Event): void {
     e.stopPropagation();
-    this.value = '';
-    this.selectedDate = null;
-    this.changeSubject.next(this);
+    if (!this.disabled) this.commitClear();
   }
 
   public handleManualInput(e: InputEvent): void {
-    const input = e.target as HTMLInputElement;
-    const inputValue = input.value.trim();
-
-    if (!inputValue) {
-      this.value = '';
-      this.selectedDate = null;
-      return;
-    }
-
-    const parsedDate = this.parseManualDate(inputValue);
-    if (parsedDate && !isNaN(parsedDate.getTime())) {
-      this.value = parsedDate.toISOString();
-      this.selectedDate = parsedDate;
-      this.viewDate = new Date(parsedDate);
-      this.selectedHour = parsedDate.getHours();
-      this.selectedMinute = parsedDate.getMinutes();
-      this.changeSubject.next(this);
-    }
+    if (this.disabled) return;
+    this.draftText = (e.target as HTMLInputElement).value;
+    if (!e.isComposing) this.updateValidation(this.currentValidationMessage());
   }
 
-  public handleInputBlur(e: FocusEvent): void {
-    const input = e.target as HTMLInputElement;
-    const inputValue = input.value.trim();
-
-    if (!inputValue) {
-      this.value = '';
-      this.selectedDate = null;
-      this.changeSubject.next(this);
-      return;
-    }
+  public handleInputBlur(_event: FocusEvent): void {
+    if (!this.disabled && this.draftText !== null) this.commitManualInput(true);
+  }
 
-    const parsedDate = this.parseManualDate(inputValue);
-    if (parsedDate && !isNaN(parsedDate.getTime())) {
-      this.value = parsedDate.toISOString();
-      this.selectedDate = parsedDate;
-      this.viewDate = new Date(parsedDate);
-      this.selectedHour = parsedDate.getHours();
-      this.selectedMinute = parsedDate.getMinutes();
-      this.changeSubject.next(this);
-      input.value = this.formatDate(this.value);
-    } else {
-      input.value = this.formatDate(this.value);
-    }
+  private commitManualInput(normalizeDraft: boolean): void {
+    const text = this.draftText?.trim() ?? '';
+    if (!text) { this.commitClear(); return; }
+    const date = this.parseManualDate(text);
+    const message = dateValidationMessage(date, this);
+    if (message) { this.updateValidation(message); return; }
+    this.commitDate(date!, normalizeDraft);
   }
 
   private parseManualDate(input: string): Date | null {
-    if (!input) return null;
-
-    const parts = input.split(' ');
-    let datePart = parts[0];
-    let timePart = parts[1] || '';
-    let parsedDate: Date | null = null;
-
-    const isoMatch = datePart.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
-    if (isoMatch) {
-      const [_, year, month, day] = isoMatch;
-      parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-    }
-
-    if (!parsedDate) {
-      const euMatch = datePart.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
-      if (euMatch) {
-        const [_, day, month, year] = euMatch;
-        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-      }
+    const match = /^(\S+)(?:\s+(\d{1,2}):(\d{2})(?:\s+(AM|PM))?)?$/i.exec(input.trim());
+    if (!match) return null;
+    const fields = parseDateFields(match[1]);
+    if (!fields) return null;
+    let hour = Number(match[2] ?? 0);
+    const minute = Number(match[3] ?? 0);
+    if (match[4]) {
+      if (hour < 1 || hour > 12) return null;
+      hour = hour % 12 + (match[4].toUpperCase() === 'PM' ? 12 : 0);
     }
+    return createCalendarDate(...fields, match[2] === undefined ? undefined : hour, minute);
+  }
 
-    if (!parsedDate) {
-      const usMatch = datePart.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
-      if (usMatch) {
-        const [_, month, day, year] = usMatch;
-        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-      }
+  private currentValidationMessage(): string {
+    if (this.disabled) return '';
+    const text = this.draftText?.trim();
+    if (this.draftText !== null) {
+      if (!text) return this.required ? 'Choose a date.' : '';
+      return dateValidationMessage(this.parseManualDate(text), this);
     }
+    if (!this.value) return this.required ? 'Choose a date.' : '';
+    return dateValidationMessage(parseDateValue(this.value), this);
+  }
 
-    if (!parsedDate || isNaN(parsedDate.getTime())) return null;
+  private updateValidation(message: string): void {
+    const changed = message !== this.validationText;
+    this.validationText = message;
+    this.shadowRoot?.querySelector('input')?.setCustomValidity(message);
+    if (changed) this.dispatchEvent(new CustomEvent('validation-change', {
+      detail: { valid: !message, message }, bubbles: true, composed: true,
+    }));
+  }
 
-    if (timePart) {
-      const timeMatch = timePart.match(/^(\d{1,2}):(\d{2})$/);
-      if (timeMatch) {
-        const [_, hours, minutes] = timeMatch;
-        parsedDate.setHours(parseInt(hours));
-        parsedDate.setMinutes(parseInt(minutes));
-      }
-    } else if (!this.enableTime) {
-      const now = new Date();
-      parsedDate.setHours(now.getHours());
-      parsedDate.setMinutes(now.getMinutes());
-      parsedDate.setSeconds(0);
-      parsedDate.setMilliseconds(0);
-    }
+  public checkValidity(): boolean { return !this.currentValidationMessage(); }
 
-    return parsedDate;
+  public reportValidity(): boolean {
+    const message = this.currentValidationMessage();
+    this.updateValidation(message);
+    if (message) this.focus();
+    return !message;
   }
 
+  public reset(): void { this.setValue(''); }
+
   private formatValueWithTimezone(date: Date): string {
     if (!this.enableTimezone) return date.toISOString();
 
@@ -403,32 +423,13 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
     return this.value;
   }
 
-  public setValue(value: string): void {
-    this.value = value;
-    if (value) {
-      try {
-        const date = new Date(value);
-        if (!isNaN(date.getTime())) {
-          this.selectedDate = date;
-          this.viewDate = new Date(date);
-          this.selectedHour = date.getHours();
-          this.selectedMinute = date.getMinutes();
-        }
-      } catch {
-        // Invalid date
-      }
-    }
+  public setValue(value: string | null): void {
+    this.syncValue(value);
+    this.updateValidation(this.currentValidationMessage());
   }
 
   async disconnectedCallback() {
+    this.closePopup();
     await super.disconnectedCallback();
-    if (this.popupInstance) {
-      this.popupInstance.removeEventListener('date-selected', this.handleDateSelected);
-      this.popupInstance.removeEventListener('date-cleared', this.handleDateCleared);
-      this.popupInstance.removeEventListener('close-request', this.handleCloseRequest);
-      this.popupInstance.removeEventListener('reposition-request', this.handleRepositionRequest);
-      this.popupInstance.hide();
-      this.popupInstance = null;
-    }
   }
 }

package/ts_web/elements/00group-input/dees-input-datepicker/date-validation.ts

@@ -0,0 +1,64 @@
+export interface IDateConstraints {
+  minDate: string;
+  maxDate: string;
+  disabledDates: string[];
+}
+
+/** Construct a local calendar date without accepting Date's overflow normalization. */
+export const createCalendarDate = (year: number, month: number, day: number, hour?: number, minute = 0): Date | null => {
+  const requestedHour = hour ?? 0;
+  if (![year, month, day, requestedHour, minute].every(Number.isInteger)
+    || year < 1 || year > 9999 || month < 1 || month > 12 || day < 1 || day > 31
+    || requestedHour < 0 || requestedHour > 23 || minute < 0 || minute > 59) return null;
+  const date = new Date(0);
+  // setFullYear avoids the constructor's special mapping of years 0–99 to 1900–1999.
+  date.setFullYear(year, month - 1, day);
+  date.setHours(requestedHour, minute, 0, 0);
+  // Some zones enter daylight saving at midnight. A date-only entry still names
+  // that valid calendar day; an explicitly typed nonexistent time is rejected.
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day
+    && (hour === undefined || date.getHours() === hour && date.getMinutes() === minute) ? date : null;
+};
+
+export const parseDateFields = (text: string): [number, number, number] | null => {
+  let match = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(text);
+  if (match) return [Number(match[1]), Number(match[2]), Number(match[3])];
+  match = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(text);
+  if (match) return [Number(match[3]), Number(match[2]), Number(match[1])];
+  match = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(text);
+  return match ? [Number(match[3]), Number(match[1]), Number(match[2])] : null;
+};
+
+/** Date-only constraints are local calendar days, never UTC-midnight instants. */
+export const parseDateValue = (value: string): Date | null => {
+  if (!value) return null;
+  const fields = parseDateFields(value);
+  if (fields) return createCalendarDate(...fields);
+  const iso = /^(\d{4})-(\d{2})-(\d{2})T/.exec(value);
+  if (!iso || !createCalendarDate(Number(iso[1]), Number(iso[2]), Number(iso[3]))) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+export const calendarDayKey = (date: Date): number =>
+  date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
+
+/** Shared by manual entry, calendar buttons and the final commit boundary. */
+export const dateValidationMessage = (date: Date | null, constraints: IDateConstraints): string => {
+  if (!date || Number.isNaN(date.getTime()) || date.getFullYear() < 1 || date.getFullYear() > 9999) return 'Enter a valid date (YYYY-MM-DD, DD.MM.YYYY or MM/DD/YYYY).';
+  const key = calendarDayKey(date);
+  for (const bound of ['minDate', 'maxDate'] as const) {
+    if (!constraints[bound]) continue;
+    const limit = parseDateValue(constraints[bound]);
+    if (!limit) return `${bound === 'minDate' ? 'Minimum' : 'Maximum'} date is invalid.`;
+    if (bound === 'minDate' ? key < calendarDayKey(limit) : key > calendarDayKey(limit)) {
+      return `Choose a date on or ${bound === 'minDate' ? 'after' : 'before'} ${constraints[bound]}.`;
+    }
+  }
+  for (const value of constraints.disabledDates ?? []) {
+    const disabled = parseDateValue(value);
+    if (!disabled) return 'A disabled date is invalid.';
+    if (key === calendarDayKey(disabled)) return 'This date is unavailable.';
+  }
+  return '';
+};

package/ts_web/elements/00group-input/dees-input-datepicker/datepicker-popup.ts

@@ -14,6 +14,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import type { IDateEvent } from './types.js';
+import { createCalendarDate, dateValidationMessage } from './date-validation.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -534,29 +535,32 @@ export class DeesInputDatepickerPopup extends DeesElement {
             const totalEventCount = dayEvents.reduce((sum, event) => sum + (event.count || 1), 0);
 
             return html`
-              <div
+              <button type="button"
                 class="day ${isOtherMonth ? 'other-month' : ''} ${isToday ? 'today' : ''} ${isSelected ? 'selected' : ''} ${isDayDisabled ? 'disabled' : ''} ${hasEvents ? 'has-event' : ''}"
+                ?disabled=${isDayDisabled}
+                aria-label=${`${String(day.getFullYear()).padStart(4, '0')}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}`}
+                aria-pressed=${isSelected ? 'true' : 'false'}
                 @click=${() => !isDayDisabled && this.handleSelectDate(day)}
               >
                 ${day.getDate()}
                 ${hasEvents ? html`
                   ${totalEventCount > 3 ? html`
-                    <div class="event-count">${totalEventCount}</div>
+                    <span class="event-count">${totalEventCount}</span>
                   ` : html`
-                    <div class="event-indicator">
+                    <span class="event-indicator">
                       ${dayEvents.slice(0, 3).map(event => html`
-                        <div class="event-dot ${event.type || 'info'}"></div>
+                        <span class="event-dot ${event.type || 'info'}"></span>
                       `)}
-                    </div>
+                    </span>
                   `}
                   ${dayEvents[0].title ? html`
-                    <div class="event-tooltip">
+                    <span class="event-tooltip">
                       ${dayEvents[0].title}
                       ${totalEventCount > 1 ? html` (+${totalEventCount - 1} more)` : ''}
-                    </div>
+                    </span>
                   ` : ''}
                 ` : ''}
-              </div>
+              </button>
             `;
           })}
         </div>
@@ -601,8 +605,8 @@ export class DeesInputDatepickerPopup extends DeesElement {
         ` : ''}
 
         <div class="calendar-actions">
-          <button class="action-button today-button" @click=${this.handleSelectToday}>Today</button>
-          <button class="action-button clear-action-button" @click=${this.handleClear}>Clear</button>
+          <button type="button" class="action-button today-button" ?disabled=${this.isDayDisabled(new Date())} @click=${this.handleSelectToday}>Today</button>
+          <button type="button" class="action-button clear-action-button" @click=${this.handleClear}>Clear</button>
         </div>
       </div>
     `;
@@ -624,22 +628,19 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
   // Calendar logic
   private getDaysInMonth(): Date[] {
-    const year = this.viewDate.getFullYear();
-    const month = this.viewDate.getMonth();
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const days: Date[] = [];
+    const firstDay = new Date(this.viewDate);
+    firstDay.setDate(1);
+    firstDay.setHours(12, 0, 0, 0);
 
     const startOffset = this.weekStartsOn === 1
       ? (firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1)
       : firstDay.getDay();
 
-    for (let i = startOffset; i > 0; i--) days.push(new Date(year, month, 1 - i));
-    for (let i = 1; i <= lastDay.getDate(); i++) days.push(new Date(year, month, i));
-    const remaining = 42 - days.length;
-    for (let i = 1; i <= remaining; i++) days.push(new Date(year, month + 1, i));
-
-    return days;
+    return Array.from({ length: 42 }, (_, index) => {
+      const day = new Date(firstDay);
+      day.setDate(1 - startOffset + index);
+      return day;
+    });
   }
 
   private isToday(date: Date): boolean {
@@ -653,15 +654,7 @@ export class DeesInputDatepickerPopup extends DeesElement {
   }
 
   private isDayDisabled(date: Date): boolean {
-    if (this.minDate) { const min = new Date(this.minDate); if (date < min) return true; }
-    if (this.maxDate) { const max = new Date(this.maxDate); if (date > max) return true; }
-    if (this.disabledDates?.length) {
-      return this.disabledDates.some(ds => {
-        try { const d = new Date(ds); return date.getDate() === d.getDate() && date.getMonth() === d.getMonth() && date.getFullYear() === d.getFullYear(); }
-        catch { return false; }
-      });
-    }
-    return false;
+    return Boolean(dateValidationMessage(date, this));
   }
 
   private getEventsForDate(date: Date): IDateEvent[] {
@@ -671,16 +664,24 @@ export class DeesInputDatepickerPopup extends DeesElement {
   }
 
   private previousMonth(): void {
-    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);
+    const date = new Date(this.viewDate);
+    date.setMonth(date.getMonth() - 1, 1);
+    this.viewDate = date;
   }
 
   private nextMonth(): void {
-    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);
+    const date = new Date(this.viewDate);
+    date.setMonth(date.getMonth() + 1, 1);
+    this.viewDate = date;
   }
 
   // Event dispatching
   private handleSelectDate(day: Date): void {
-    this.selectedDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), this.selectedHour, this.selectedMinute);
+    if (this.isDayDisabled(day)) return;
+    const selected = createCalendarDate(day.getFullYear(), day.getMonth() + 1, day.getDate(),
+      this.enableTime ? this.selectedHour : undefined, this.enableTime ? this.selectedMinute : 0);
+    if (!selected || this.isDayDisabled(selected)) return;
+    this.selectedDate = selected;
     this.dispatchEvent(new CustomEvent('date-selected', { detail: this.selectedDate }));
     if (!this.enableTime) {
       this.dispatchEvent(new CustomEvent('close-request'));
@@ -689,14 +690,11 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
   private handleSelectToday(): void {
     const today = new Date();
-    this.selectedDate = today;
+    if (this.isDayDisabled(today)) return;
     this.viewDate = new Date(today);
     this.selectedHour = today.getHours();
     this.selectedMinute = today.getMinutes();
-    this.dispatchEvent(new CustomEvent('date-selected', { detail: this.selectedDate }));
-    if (!this.enableTime) {
-      this.dispatchEvent(new CustomEvent('close-request'));
-    }
+    this.handleSelectDate(today);
   }
 
   private handleClear(): void {
@@ -722,7 +720,7 @@ export class DeesInputDatepickerPopup extends DeesElement {
     const input = e.target as HTMLInputElement;
     let value = parseInt(input.value) || 0;
     value = Math.max(0, Math.min(59, value));
-    if (this.minuteIncrement > 1) value = Math.round(value / this.minuteIncrement) * this.minuteIncrement;
+    if (this.minuteIncrement > 1) value = Math.min(59, Math.round(value / this.minuteIncrement) * this.minuteIncrement);
     this.selectedMinute = value;
     this.emitTimeUpdate();
   };
@@ -740,7 +738,9 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
   private emitTimeUpdate(): void {
     if (this.selectedDate) {
-      this.selectedDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate(), this.selectedHour, this.selectedMinute);
+      const selected = createCalendarDate(this.selectedDate.getFullYear(), this.selectedDate.getMonth() + 1, this.selectedDate.getDate(), this.selectedHour, this.selectedMinute);
+      if (!selected || this.isDayDisabled(selected)) return;
+      this.selectedDate = selected;
       this.dispatchEvent(new CustomEvent('date-selected', { detail: this.selectedDate }));
     }
   }

package/ts_web/elements/00group-input/dees-input-datepicker/styles.ts

@@ -38,6 +38,11 @@ export const datepickerStyles = [
         color: var(--dees-color-text-muted);
       }
 
+      .date-input[aria-invalid="true"] { border-color: var(--dees-color-accent-error); }
+      .field-messages { grid-column: 1 / -1; }
+      .validationText { color: var(--dees-color-text-error); font-size: var(--dees-font-footnote-size); }
+      .validationText:not(:empty) { margin-top: var(--dees-spacing-xs); }
+
       .date-input:hover:not(:disabled) {
         border-color: var(--dees-color-border-strong);
       }