Skip to content

[DatePicker]: [DatePicker opens in day view when using displayFormat/valueFormat for month-only usage (formatPattern deprecated)] #12331

@bbugalaconvista

Description

@bbugalaconvista

Description of the bug

DatePicker opens in day view when using displayFormat/valueFormat for month-only usage (formatPattern deprecated)

When migrating from formatPattern to valueFormat/displayFormat, the DatePicker no longer opens in month view on first open. Even with displayFormat="yyyy-MM" and valueFormat="yyyy-MM", the popover initially shows the day grid. Previously, using formatPattern="yyyy-MM" opened the month picker directly.

Current behavior

  • DatePicker opens in day view even when only month/year are intended.
  • To restore the old UX, we must either:
    • keep using deprecated formatPattern="yyyy-MM", or
    • reach into the static area and call calendar.showMonthPicker() after open (unsupported/private).

Minimal reproduction

import { DatePicker } from "@ui5/webcomponents-react";

export default function Repro() {
  return (
    <DatePicker
      placeholder="Select month"
      displayFormat="yyyy-MM"
      valueFormat="yyyy-MM"
      // value="2025-09" // optional
      onChange={(e) => console.log(e.detail.value)}
    />
  );
}

Workaround tried

  • Using deprecated formatPattern="yyyy-MM" still forces month view on first open.

Proposed solutions

  • Respect displayFormat/valueFormat to infer the initial view (month view for "yyyy-MM").
  • Or add an explicit, supported prop to control the initial picker view (e.g., startView="month" / openPickerView="month").

Isolated Example

https://stackblitz.com/edit/github-ax4jom7s?file=src%2FApp.tsx

Reproduction steps

  1. Click on the calendar icon

Expected Behaviour

  • If displayFormat/valueFormat indicate month granularity (e.g., "yyyy-MM"), the DatePicker should open with the month picker selected on first open.
  • Alternatively, provide a supported API (e.g., startView="month" or openPickerView="month") to control the initial calendar view without relying on deprecated props or private DOM.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.14.0

UI5 Web Components Version

2.14.0

Browser

Firefox, Chrome

Operating System

Windows

Additional Context

No response

Relevant log output

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Assignees

Type

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions