Microsoft Lists: date picker shown on the upper-left corner of UI when inlineEditField JSON property is applied to a date column

[Fedes365]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

not applicable

Developer environment

None

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• Microsoft Edge Version 126.0.2592.102 (Official build) (64-bit)
• Google Chrome Version 126.0.6478.127 (Official build) (64-bit)

Describe the bug / error

When "inlineEditField" JSON property is applied to a DateTime column, the related date picker appears on the upper-left corner of Microsoft Lists user interface:

Furthermore, the placeholder letters related to week days are displayed based on a wrong language. For example, here is what's happening with italian UI:

Just for curiosity, I had a look at what's going on behind the scenes and here is the result in my browser DOM:

This bug has been confirmed by @tecchan1107 too.

Steps to reproduce

1. Create a new list
2. Add a date-time column named "Start" (just as an example)
3. Click on Column setting --> Click on Format this column --> Click on Advanced mode
4. Apply the following basic JSON code and save:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "inlineEditField": "[$Start]", "style": { "box-sizing": "border-box", "padding": "0 2px", "overflow": "hidden", "text-overflow": "ellipsis" }, "attributes": { "class": "sp-field-fontSizeMedium sp-css-color-BlackText sp-field-bold" }, "txtContent": "[$Start.displayValue]" }

Expected behavior

When clicking on a cell to trigger the inlineEditField property, the date picker should appear positioned exactly over its underlying cell.

[tpodugu-ms]

@Fedes365 We have identified the issue last week and fixed it. Fix will be available in production in 2 weeks.

[XueSheng-GIT]

@tpodugu-ms The issue got worse. Now the date picker not displayed at all anymore if used as inlineEdit field. This currently applies to Lists and Document libraries. SharePoint version info: vti_extenderversion:SR|16.0.0.25304

Date field within inlineEdit (no date picker is displayed):

Same column within list form (date picker is displayed correctly):

[tpodugu-ms]

@XueSheng-GIT Thanks for reporting this. Team started checking this on priority. We will update ASAP.

[XueSheng-GIT]

@tpodugu-ms this issue seems now to be fixed for lists. But at the same time the date picker broke for document libraries. Do you have any insights in this regards?

[Ashlesha-MSFT]

Hello @Fedes365, Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@Fedes365, @XueSheng-GIT, May it is fixed. Observed expected behavior for lists as well as libraries.

[XueSheng-GIT]

@Ashlesha-MSFT Position of inline edit date picker is indeed fixed. But I noticed that the "day headers" seem to use a wrong locale. E.g. with German language setting:

Detail bar - correct day headers:

Inline edit - incorrect day headers:

Should I create a new issue for this?

[Ashlesha-MSFT]

@XueSheng-GIT, Thanks for the update.

I attempted to reproduce the sub-issue by setting the locale to Chinese, but I was unable to reproduce it. Could you please create a new issue with detailed reproduction steps, so we can track it separately? Once that's done, feel free to close this one.

Appreciate your help!

[Fedes365]

Since the issue reported here is fixed, I will close it.

Thanks for your support.