Skip to content

Date/Time/Time field pickers: fixed width and keep-open-until-click-outside #36156

Description

@erickgonzalez

Description

Fix two issues with the Date, Date/Time, and Time field pickers in the new Edit Contentlet.

  1. Width — The picker currently stretches full width. It should have a predetermined, fixed width that fits the control instead of spanning the whole form. Align with PrimeNG's default datepicker sizing rather than a hard-coded magic number.
  2. Close behavior — The calendar/picker should not close when a date is clicked, because the user may still need to select the time. It should stay open and only close when the user clicks outside of it. This applies to all three field types (Date, Date/Time, Time) for consistent behavior.

🔗 Reference: PrimeNG DatePicker

Acceptance Criteria

Width

  • The Date field picker renders at a fixed, predetermined width (not full width)
  • The Date/Time field picker renders at a fixed, predetermined width (not full width)
  • The Time field picker renders at a fixed, predetermined width (not full width)
  • The width aligns with PrimeNG's default datepicker sizing (no arbitrary hard-coded value)

Close behavior

  • Clicking a date in the calendar does not close the picker
  • The picker stays open after a date selection so the user can also pick the time
  • The picker closes only when the user clicks outside of it
  • This behavior is consistent across all three field types: Date, Date/Time, and Time
  • The selected date/time value is correctly applied to the field when the picker is closed

Priority

Medium

Additional Context

Part of the new Edit Contentlet work (dotCMS: New Edit Contentlet). The fields are built on PrimeNG — use its DatePicker defaults/configuration for both the width and the "stay open until click-outside" behavior. Keeping the panel open on date selection is required so users editing Date/Time and Time fields can complete the time portion before dismissing.

Metadata

Metadata

Type

Fields

No fields configured for Task.

Projects

Status
In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions