The editors in my current project asked us to give them a way to set a date range that would make certain page contents hidden. DateTime property seemed like an obvious choice. And it was like that for a while.

However, later on we discovered that it works fine only when the date property is initially empty or when the date was assigned beforehand. The problem was that the editors had no way to clear the selected date. We tried Backspace, Delete but none seemed to solve the problem – the date was always reverted to the last selected date.

Nullable DateTime property

Extending property

I didn’t want to change the built-in property, and started to think about extending the existing one and inheriting the new widget from DateTimeSelectorDropdown. The easiest way that I found, was to add a “Clear value” button. After applying my changes the property look like this:

Extended nullable DateTime property

Implementing new widget

Inside postMixInProperties method I created new link with inline styles and added it to the existing Date dropdown widget.

To clear the date you could also use a shortcut – CTRL+DEL. This functionality was implemented with keypress event and  dojo/keys module.

Additionally the new widget also supports read-only mode, so when the page is previewed in read-only mode, the button is not visible.

To use the snippet add UiHint to your nullable date property: