[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:
parent
1479ddc2af
commit
d1c810739e
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user