Scope & Context

This feature request concerns the datetime picker component used throughout the Twenty CRM application, for instance, when scheduling an appointment or setting a task deadline. The goal is to improve the user experience by making the process of setting a time as intuitive and efficient as setting a date.

Current behavior

The current datetime picker component is heavily focused on date selection. A user can easily select the year, month, and day from an interactive calendar view. However, to set the time (i.e., hours and minutes), the user must manually type the values into the text input field. There is no graphical interface or "picker" for the time component, which can be inefficient when the field focus is about start time.

Expected behavior

Include a dedicated, visual time selection interface. This would make the component more versatile and faster to use. The ideal implementation would allow the picker's focus to be configured for either date or time.

1. Add a visual time picker: After a user selects a date, they should be able to click on the time portion of the input (e.g., 12:15) to switch from the calendar view to a time picker view. This view should allow for quick selection of hours and minutes, for example, using two scrollable columns.

2. Introduce a configurable focus mode: To cater to different use cases, the component should be adaptable. A solution would be adding a property to determine whether the picker opens with a focus on the date or the time.

   • Date-first mode (default): The component behaves as it does now, opening the calendar view first. The user can then navigate to the time picker. This is suitable for most standard date-scheduling tasks.
   • Time-first mode: The component would open directly on the new time selector view. This is extremely useful for workflows where the time of day is the primary information, such as setting the time for a recurring daily meeting or booking a standard time slot.

Technical inputs

NA