[IMP] web: Owl DateTimePicker

This commit introduces a date picker OWL component meant to handle the
following use-cases:
- date picker
- date & time picker
- date range picker
- date & time range picker

Basically, this component is the union of the two previous third-party
libraries handling these cases: TempusDominus and DateRangePicker.

New components introduced:

* The main addition of this commit is the `DateTimePicker` itself which
handles the display and interactions of the calendar and time pickers.
> see @web/core/datetime/datetime_picker

* The picker can then be coupled to an input using the
`useDateTimePicker` hook. The purpose of this hook is to handle events
on a given input element and syncronize its value to a date picker it
will spawn in a popover.
> see @web/core/datetime/datetime_hook

* Lastly, a simple `DateTimeInput` component will render an input and
call the hook mentioned above to handle it. This component is
effectively replacing the previous DatePicker and DateTimePicker
components (note that it does not handle range values).
> see @web/core/datetime/datetime_input

Another noticeable change of this commit is the definition of daterange
fields in views:

- Previously, the arch would have to define both fields
and bind them via their options, while also adding an arrow between
inputs or other forms of connection.

- In the new implementation, only the start date field must be declared,
and a date range can be spawned by providing an `end_date_field` in its
options.

Example:
```xml
<field
    name="start_datetime"
    widget="daterange"
    options="{'end_date_field': 'end_datetime'}"
/>
```

warning Added limitations:

- this new way of declaring date ranges means that templates have been
revised to declare one field tag instead of two. This means that list
views using date ranges have lost the ability to be sorted on their end
date fields.

> Justification: the current use cases have been reviewed and it has
been decided that it was not needed to sort on the end date on the
affected list views.

> Workaround: drop the date range and declare both fields as simple date
pickers (i.e. without the end_date_field option).

- all modifiers applied to a field using a date range will be copied and
applied to the end date field. There is no way to define modifiers
specific to one field or the other.

> Justification: there was no use case where one of the two fields
needed specific modifiers.

> Workaround: same as the previous point: split the range into 2 simple
date picker fields.

Additional notes:

- the widget="daterange" is not mandatory in form views, but is required
in list views because only fields with explicit widgets will not be
rendered as simple <span> elements. The date range feature will be
available as soon as an end_date_field is specified.

- as the end date field is not explicitly defined in the view anymore,
any modifier depending on it need to have it defined as invisible
somewhere in the arch.

Task ID: 3121497

closes odoo/documentation#4330

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Julien Mougenot 2023-04-20 15:37:42 +00:00
parent 1479ddc2af
commit d1c810739e

View File

@ -1409,50 +1409,72 @@ Char (`char`)
- Supported field types: `char`
date (FieldDate)
This is the default field type for fields of type *date*. Note that it also
works with datetime fields. It uses the session timezone when formatting
dates.
.. _reference/javascript_reference/date_field:
- Supported field types: *date*, *datetime*
Date (`date`)
This is the default field type for fields of type `date`. It consists of a text
box and a date picker.
Options:
- Supported field types: `date`
- datepicker: extra settings for the datepicker_ widget.
Options:
.. code-block:: xml
- `min_date` / `max_date`: sets limit dates for accepted values. By default, the earliest
accepted date is **1000-01-01** and the latest is **9999-12-31**.
Accepted values are SQL-formatted dates (`yyyy-MM-dd HH:mm:ss`) or `"today"`.
<field name="datefield" options='{"datepicker": {"daysOfWeekDisabled": [0, 6]}}'/>
.. code-block:: xml
datetime (FieldDateTime)
This is the default field type for fields of type *datetime*.
<field name="datefield" options="{'min_date': 'today', 'max_date': '2023-12-31'}" />
- Supported field types: *date*, *datetime*
- warn_future: displays a warning if the value is in the future (based on today).
Options:
.. code-block:: xml
- datepicker: extra settings for the datepicker_ widget.
<field name="datefield" options="{'warn_future': true}" />
.. code-block:: xml
.. _reference/javascript_reference/datetime_field:
<field name="datetimefield" options='{"datepicker": {"daysOfWeekDisabled": [0, 6]}}'/>
Date & Time (`datetime`)
This is the default field type for fields of type `datetime`. The values are always
in the client's timezone.
daterange (FieldDateRange)
This widget allows the user to select start and end date into a single picker.
- Supported field types: `datetime`
- Supported field types: *date*, *datetime*
Options:
Options:
- see :ref:`Date Field <reference/javascript_reference/date_field>` options
- related_start_date: apply on end date field to get start date value which
is used to display range in the picker.
- related_end_date: apply on start date field to get end date value which
is used to display range in the picker.
- picker_options: extra settings for picker.
- `rounding`: increment used to generate available minutes in the time picker. This
does not affect the actual value, just the amount of available options in the
select dropdown (default: `5`).
.. code-block:: xml
.. code-block:: xml
<field name="start_date" widget="daterange" options='{"related_end_date": "end_date"}'/>
<field name="datetimefield" options="{'rounding': 10}" />
Date Range (`daterange`)
This widget allows the user to select start and end date from a single picker.
- Supported field types: `date`, `datetime`
Options:
- see :ref:`Date Field <reference/javascript_reference/date_field>` or :ref:`Date & Time Field <reference/javascript_reference/datetime_field>` options
- `start_date_field`: field used to get/set the start value of the date range (cannot be used with
`end_date_field`).
.. code-block:: xml
<field name="end_date" widget="daterange" options="{'start_date_field': 'start_date'}" />
- `end_date_field`: field used to get/set the end value of the date range (cannot be used with
`start_date_field`).
.. code-block:: xml
<field name="start_date" widget="daterange" options="{'end_date_field': 'end_date'}" />
Remaining Days (`remaining_days`)
This widget can be used on date and datetime fields. In readonly, it displays