Date selector in page builder not working

Having an issue with the date selector on a site we have built. When we click on a date to select it, the pop-up doesn't close and if we click outside the pop-up to close it, we get a notification saying "Are you sure you want to close the dialog? You have unsaved changes". This also prevents us from clicking the 'Apply' button to save the changes without closing the pop-up.

This is only happening in the Page Builder for widgets, date selectors on content types are working fine. The widget is using the 'DateInputComponent' Form Annotation and is built using a View Component.

I have also removed any custom javascript being loaded from our side and the issue still happens. There are no errors being logged in the console or in the network tab, and nothing in the event log.

Has anyone had a similar issue at any point, or have any suggestions on what could be causing the issue?

Environment

  • Xperience by Kentico version: 31.7.1

  • .NET version: 10

  • Execution environment: Private cloud (Virtual machine)

Tags:
DXP Xperience Administration v31.7.0

Answers

Accepted answer

Hi Alex,

Thanks for the detailed report - I was able to reproduce this on Xperience by Kentico 31.7.1 using the Dancing Goat sample site, so this isn't specific to your environment or a custom JS conflict.

What I found:

The issue occurs specifically with the DateInputComponent. When you pick a date, the picker doesn't close automatically, and clicking outside of it triggers the "Are you sure you want to close the dialog? You have unsaved changes" prompt — even though a valid value was selected. Clicking OK discards the change and closes the whole widget properties dialog; clicking Cancel leaves the date picker open, and only then does clicking Apply actually save your selection. Clicking Apply directly (without going through that Cancel step first) closes the entire dialog instead of saving.

I reproduced this with a property set up like this:

/// <summary>
/// Date Input Component
/// </summary>
[DateInputComponent(Label = "DOB", Order = 3)]
public DateTime DOB { get; set; }

Workaround:

Switching to DateTimeInputComponent instead of DateInputComponent avoids the bug entirely — it shows a "Done" button in the picker, so date selection and Apply both work as expected:

[DateTimeInputComponent(Label = "DOB", Order = 3)]
public DateTime DOB { get; set; }

If you only need a date (no time portion), this isn't a perfect 1:1 replacement from a UX standpoint, but it's a solid workaround until this is fixed, since the underlying stored value is still a DateTime.

Here are screenshots which I reproduce -
https://ibb.co/4nTc037v

https://ibb.co/cXwHcB8S

https://ibb.co/849nGxRP

https://ibb.co/99n1L7dn

Suggestion:

This looks like a genuine bug in DateInputComponent's dialog-close/dirty-state handling in Page Builder widgets (as opposed to content type editing forms, where you noted it works fine). I'd recommend raising it directly with Kentico support or on their GitHub issue tracker referencing version 31.7.1, since community members can confirm the repro but can't patch the core component. Worth linking this thread when you do, so others hitting the same issue can find the workaround.

Hope that helps unblock you in the meantime - let us know if DateTimeInputComponent works for your use case!

To response this discussion, you have to login first.