-
diff --git a/addons/note/static/tests/activity_menu_tests.js b/addons/note/static/tests/activity_menu_tests.js
index e94a4b9dd3b..7f76c4d67fe 100644
--- a/addons/note/static/tests/activity_menu_tests.js
+++ b/addons/note/static/tests/activity_menu_tests.js
@@ -55,7 +55,7 @@ QUnit.test("create note from activity menu with date", async function (assert) {
await editInput(target, "input.o-mail-ActivityMenu-input", "New Note");
await editInput(
target,
- "input.o_datepicker_input",
+ "input.o_datetime_input",
futureDay.toString(luxon.DateTime.DATE_SHORT)
);
await click("button:contains(SAVE)");
diff --git a/addons/project/static/tests/tours/project_update_tour_tests.js b/addons/project/static/tests/tours/project_update_tour_tests.js
index 716f5d5a5d1..958c6926fd0 100644
--- a/addons/project/static/tests/tours/project_update_tour_tests.js
+++ b/addons/project/static/tests/tours/project_update_tour_tests.js
@@ -106,7 +106,7 @@ registry.category("web_tour.tours").add('project_update_tour', {
trigger: "div.o_field_widget[name=name] input",
run: 'text New milestone'
}, {
- trigger: "div[name=deadline] .datetimepicker-input",
+ trigger: "input[data-field=deadline]",
run: 'text 12/12/2099'
}, {
trigger: ".modal-footer .o_form_button_save"
@@ -116,14 +116,14 @@ registry.category("web_tour.tours").add('project_update_tour', {
trigger: "div.o_field_widget[name=name] input",
run: 'text Second milestone'
}, {
- trigger: "div[name=deadline] .datetimepicker-input",
+ trigger: "input[data-field=deadline]",
run: 'text 12/12/2022'
}, {
trigger: ".modal-footer .o_form_button_save"
}, {
trigger: ".o_rightpanel_milestone:eq(1) .o_milestone_detail",
}, {
- trigger: "div[name=deadline] .datetimepicker-input",
+ trigger: "input[data-field=deadline]",
run: 'text 12/12/2100'
}, {
trigger: ".modal-footer .o_form_button_save"
diff --git a/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js b/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
index d6521b33e9a..10468ab7063 100644
--- a/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
+++ b/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
@@ -261,7 +261,7 @@ registry.category("web_tour.tours").add('sale_timesheet_tour', {
content: "Edit new Milestone",
run: 'text New milestone',
}, {
- trigger: "div[name=deadline] .datetimepicker-input",
+ trigger: "input[data-field=deadline]",
content: "Edit new Milestone",
run: 'text 12/12/2099',
}, {
diff --git a/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.js b/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.js
index 782aaf4603c..d84fa488faf 100644
--- a/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.js
+++ b/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.js
@@ -1,10 +1,10 @@
/** @odoo-module */
-import { YearPicker } from "../year_picker";
+import { Component, onWillUpdateProps } from "@odoo/owl";
import { dateOptions } from "@spreadsheet/global_filters/helpers";
+import { DateTimeInput } from "@web/core/datetime/datetime_input";
const { DateTime } = luxon;
-import { Component, onWillUpdateProps } from "@odoo/owl";
export class DateFilterValue extends Component {
setup() {
@@ -57,7 +57,7 @@ export class DateFilterValue extends Component {
}
}
DateFilterValue.template = "spreadsheet_edition.DateFilterValue";
-DateFilterValue.components = { YearPicker };
+DateFilterValue.components = { DateTimeInput };
DateFilterValue.props = {
// See @spreadsheet_edition/bundle/global_filters/filters_plugin.RangeType
diff --git a/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.xml b/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.xml
index 1048cf300cd..fb5863cc816 100644
--- a/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.xml
+++ b/addons/spreadsheet/static/src/global_filters/components/filter_date_value/filter_date_value.xml
@@ -13,10 +13,13 @@
-
diff --git a/addons/spreadsheet/static/src/global_filters/components/year_picker.js b/addons/spreadsheet/static/src/global_filters/components/year_picker.js
deleted file mode 100644
index 390e03970fa..00000000000
--- a/addons/spreadsheet/static/src/global_filters/components/year_picker.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/** @odoo-module */
-
-import { DatePicker } from "@web/core/datepicker/datepicker";
-const { DateTime } = luxon;
-
-const DEFAULT_DATE = DateTime.local();
-export class YearPicker extends DatePicker {
- /**
- * @override
- */
- initFormat() {
- super.initFormat();
- // moment.js format
- this.defaultFormat = "yyyy";
- this.staticFormat = "yyyy";
- }
-
- /**
- * @override
- */
- getOptions(useStatic = false) {
- return {
- format:
- !useStatic || this.isValidStaticFormat(this.format) ? this.format : this.staticFormat,
- locale: DEFAULT_DATE.locale,
- };
- }
-
- /**
- * @override
- */
- bootstrapDateTimePicker(commandOrParams) {
- if (typeof commandOrParams === "object") {
- const widgetParent = window.$(this.rootRef.el);
- commandOrParams = { ...commandOrParams, widgetParent };
- }
- super.bootstrapDateTimePicker(commandOrParams);
- }
-
- /**
- * @override
- */
- onWillUpdateProps(nextProps) {
- const pickerParams = {};
- let shouldUpdateInput = false;
- for (const prop in nextProps) {
- const prev = this.props[prop];
- const next = nextProps[prop];
- if (
- (prev instanceof DateTime && next instanceof DateTime && !prev.equals(next)) ||
- prev !== next
- ) {
- pickerParams[prop] = nextProps[prop];
- if (prop === "date") {
- this.setDateAndFormat(nextProps);
- shouldUpdateInput = true;
- }
- }
- }
- if (shouldUpdateInput) {
- this.updateInput();
- }
- this.bootstrapDateTimePicker(pickerParams);
- }
- /**
- * @override: allow displaying empty dates
- */
- updateInput({ useStatic } = {}) {
- const [formattedValue] = this.formatValue(this.date, this.getOptions(useStatic));
- this.inputRef.el.value = formattedValue || this.props.placeholder;
- }
-
- /**
- * @override
- */
- onDateChange({ useStatic } = {}) {
- const [date] = this.parseValue(this.inputRef.el.value, this.getOptions(useStatic));
- if (!date || (this.date instanceof DateTime && date.equals(this.date))) {
- this.updateInput();
- } else {
- this.state.warning = date > DateTime.local();
- this.props.onDateTimeChanged(date);
- }
- }
-}
-
-const props = {
- ...DatePicker.props,
- date: { type: DateTime, optional: true },
-};
-delete props["format"];
-
-YearPicker.props = props;
-
-YearPicker.defaultProps = {
- ...DatePicker.defaultProps,
-};
diff --git a/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action_test.js b/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action_test.js
index 7384c3c2a96..fdb2caac705 100644
--- a/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action_test.js
+++ b/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action_test.js
@@ -174,12 +174,10 @@ QUnit.test(
const serverData = getServerData(spreadsheetData);
const fixture = getFixture();
await createSpreadsheetDashboard({ serverData });
- const year = fixture.querySelector(".o_cp_top_right input.o_datepicker_input");
+ const year = fixture.querySelector(".o_cp_top_right input.o_datetime_input");
const this_year = luxon.DateTime.local().year;
assert.equal(year.value, String(this_year));
- const input = fixture.querySelector(
- "input.o_datepicker_input.o_input.datetimepicker-input"
- );
+ const input = fixture.querySelector("input.o_datetime_input");
await click(input);
await editInput(input, null, String(this_year - 1));
await nextTick();
@@ -189,6 +187,6 @@ QUnit.test(
await click(fixture.querySelector(".o_cp_top_right .fa-times"));
assert.containsNone(fixture, ".o_cp_top_right .fa-times");
- assert.equal(year.value, "Select year...");
+ assert.equal(year.placeholder, "Select year...");
}
);
diff --git a/addons/test_mail/static/tests/tracking_value_tests.js b/addons/test_mail/static/tests/tracking_value_tests.js
index 2f25d52a7ac..41bd0949dbd 100644
--- a/addons/test_mail/static/tests/tracking_value_tests.js
+++ b/addons/test_mail/static/tests/tracking_value_tests.js
@@ -228,7 +228,7 @@ QUnit.test(
});
await this.start({ res_id: mailTestTrackAllId1 });
await testUtils.fields.editAndTrigger(
- target.querySelector("div[name=date_field] .o_datepicker .o_datepicker_input"),
+ target.querySelector("div[name=date_field] input"),
"12/14/2018",
["change"]
);
@@ -249,7 +249,7 @@ QUnit.test(
});
await this.start({ res_id: mailTestTrackAllId1 });
await testUtils.fields.editAndTrigger(
- target.querySelector("div[name=date_field] .o_datepicker .o_datepicker_input"),
+ target.querySelector("div[name=date_field] input"),
"",
["change"]
);
@@ -271,7 +271,7 @@ QUnit.test(
});
await this.start({ res_id: mailTestTrackAllId1 });
await testUtils.fields.editAndTrigger(
- target.querySelector("div[name=datetime_field] .o_datepicker .o_datepicker_input"),
+ target.querySelector("div[name=datetime_field] input"),
"12/14/2018 13:42:28",
["change"]
);
@@ -297,7 +297,7 @@ QUnit.test(
});
await this.start({ res_id: mailTestTrackAllId1 });
await testUtils.fields.editAndTrigger(
- target.querySelector("div[name=datetime_field] .o_datepicker .o_datepicker_input"),
+ target.querySelector("div[name=datetime_field] input"),
"",
["change"]
);
diff --git a/addons/web/static/src/core/datepicker/datepicker.js b/addons/web/static/src/core/datepicker/datepicker.js
deleted file mode 100644
index bb101000db8..00000000000
--- a/addons/web/static/src/core/datepicker/datepicker.js
+++ /dev/null
@@ -1,354 +0,0 @@
-/** @odoo-module **/
-
-import {
- areDateEquals,
- formatDate,
- formatDateTime,
- luxonToMoment,
- luxonToMomentFormat,
- momentToLuxon,
- parseDate,
- parseDateTime,
-} from "@web/core/l10n/dates";
-import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
-import { localization } from "@web/core/l10n/localization";
-import { useAutofocus } from "@web/core/utils/hooks";
-import { isMobileOS } from "@web/core/browser/feature_detection";
-
-import {
- Component,
- onMounted,
- onWillUpdateProps,
- onWillUnmount,
- useExternalListener,
- useRef,
- useState,
-} from "@odoo/owl";
-const { DateTime } = luxon;
-
-let datePickerId = 0;
-
-/**
- * @param {Function} fn
- * @returns {[any, null] | [null, Error]}
- */
-function wrapError(fn) {
- return (...args) => {
- const result = [null, null];
- try {
- result[0] = fn(...args);
- } catch (_err) {
- result[1] = _err;
- }
- return result;
- };
-}
-
-/**
- * Date picker
- *
- * This component exposes the API of the tempusdominus datepicker library.
- * As such, its template is a simple input that will open the TD datepicker
- * when clicked on. The component will also synchronize any user-input value
- * with the library widget and vice-versa.
- *
- * Note that all props given to this component will be passed as arguments to
- * instantiate the picker widget. Also any luxon date is automatically
- * stringified since tempusdominus only works with moment objects.
- * @extends Component
- */
-export class DatePicker extends Component {
- setup() {
- this.rootRef = useRef("root");
- this.inputRef = useRef("input");
- this.state = useState({ warning: false });
-
- this.datePickerId = `o_datepicker_${datePickerId++}`;
- // Manually keep track of the "open" state to write the date in the
- // static format just before bootstrap parses it.
- this.datePickerShown = false;
-
- this.initFormat();
- this.setDateAndFormat(this.props);
-
- useAutofocus();
- useExternalListener(window, "scroll", this.onWindowScroll, { capture: true });
-
- onMounted(this.onMounted);
- onWillUpdateProps(this.onWillUpdateProps);
- onWillUnmount(this.onWillUnmount);
- }
-
- onMounted() {
- this.bootstrapDateTimePicker(this.props);
- this.updateInput();
-
- window.$(this.rootRef.el).on("show.datetimepicker", () => {
- this.datePickerShown = true;
- this.inputRef.el.select();
- });
- window.$(this.rootRef.el).on("hide.datetimepicker", ({date}) => {
- this.datePickerShown = false;
- this.onDateChange({ eventDate: date, useStatic: true });
- });
- window.$(this.rootRef.el).on("error.datetimepicker", () => false);
- }
-
- onWillUpdateProps(nextProps) {
- const pickerParams = {};
- for (const prop in nextProps) {
- if (!areDateEquals(this.props[prop], nextProps[prop])) {
- pickerParams[prop] = nextProps[prop];
- }
- }
- this.setDateAndFormat(nextProps);
- if ("date" in pickerParams || "format" in pickerParams) {
- this.updateInput();
- }
- this.bootstrapDateTimePicker(pickerParams);
- }
-
- onWillUnmount() {
- window.$(this.rootRef.el).off(); // Removes all jQuery events
- this.bootstrapDateTimePicker("destroy");
- }
-
- //---------------------------------------------------------------------
- // Protected
- //---------------------------------------------------------------------
-
- /**
- * @param {string} format
- * @returns {boolean}
- */
- isValidStaticFormat(format) {
- return /^[\d\s\/.,:-]+$/.test(DateTime.local().toFormat(format));
- }
-
- getOptions(useStatic = false) {
- return {
- format:
- !useStatic || this.isValidStaticFormat(this.format) ? this.format : this.staticFormat,
- locale: this.props.locale || (this.date && this.date.locale),
- };
- }
-
- /**
- * Initialises formatting and parsing parameters
- */
- initFormat() {
- this.defaultFormat = localization.dateFormat;
- this.staticFormat = "yyyy/MM/dd";
- this.formatValue = wrapError(formatDate);
- this.parseValue = wrapError(parseDate);
- this.isLocal = false;
- }
-
- /**
- * Sets the current date value. If a locale is provided, the given date
- * will first be set in that locale.
- * @param {Object} params
- * @param {DateTime} params.date
- * @param {string} [params.locale]
- * @param {string} [params.format]
- */
- setDateAndFormat({ date, locale, format }) {
- this.date = date && locale ? date.setLocale(locale) : date;
- // Fallback to default localization format in `@web/core/l10n/dates.js`.
- this.format = format || this.defaultFormat;
- }
-
- /**
- * Updates the input element with the current formatted date value.
- * @param {Object} [params={}]
- * @param {boolean} [params.useStatic]
- */
- updateInput({ useStatic } = {}) {
- const [formattedDate] = this.formatValue(this.date, this.getOptions(useStatic));
- if (formattedDate !== null) {
- this.inputRef.el.value = formattedDate;
- this.props.onUpdateInput(formattedDate);
- }
- }
-
- //---------------------------------------------------------------------
- // Bootstrap datepicker
- //---------------------------------------------------------------------
-
- /**
- * Handles bootstrap datetimepicker calls.
- * @param {string | Object} commandOrParams
- */
- bootstrapDateTimePicker(commandOrParams) {
- if (typeof commandOrParams === "object") {
- const format = this.isValidStaticFormat(this.format) ? this.format : this.staticFormat;
- const params = {
- ...commandOrParams,
- date: this.date || null,
- format: luxonToMomentFormat(format),
- locale: commandOrParams.locale || (this.date && this.date.locale),
- };
- for (const prop in params) {
- if (params[prop] instanceof DateTime) {
- params[prop] = luxonToMoment(params[prop]);
- }
- }
- commandOrParams = params;
- }
- return window.$(this.rootRef.el).datetimepicker(commandOrParams);
- }
-
- //---------------------------------------------------------------------
- // Handlers
- //---------------------------------------------------------------------
-
- onInputClick() {
- if (!this.datePickerShown) {
- this.updateInput({ useStatic: true });
- }
- this.bootstrapDateTimePicker("toggle");
- }
-
- /**
- * Called either when the input value has changed or when the boostrap
- * datepicker is closed. The onDateTimeChanged prop is only called if the
- * date value has changed.
- * @param {Object} [params={}]
- * @param {boolean} [params.useStatic]
- */
- onDateChange({ eventDate, useStatic } = {}) {
- const { value } = this.inputRef.el;
- let parsedDate = value && eventDate ? momentToLuxon(eventDate).setLocale(this.getOptions().locale): null;
- if (!parsedDate) {
- const options = this.getOptions(useStatic);
- parsedDate = this.parseValue(value, options)[0];
- }
- this.state.warning = parsedDate && parsedDate > DateTime.local();
- // Always update input.
- // if the date is invalid, it will reset to default (= given) date.
- // if the input is a computed date (+5d for instance), it will put the correct date.
- this.updateInput();
- if (parsedDate !== null && !areDateEquals(this.date, parsedDate)) {
- this.props.onDateTimeChanged(parsedDate);
- }
- }
-
- onInputKeydown(ev) {
- const hotkey = getActiveHotkey(ev);
- if (this.datePickerShown && hotkey === "escape") {
- this.bootstrapDateTimePicker("hide");
- this.inputRef.el.select();
- ev.preventDefault();
- ev.stopPropagation();
- }
- }
-
- /**
- * @param {Event} ev
- */
- onWindowScroll(ev) {
- if (!isMobileOS() && ev.target !== this.inputRef.el) {
- this.bootstrapDateTimePicker("hide");
- }
- }
-}
-
-DatePicker.defaultProps = {
- calendarWeeks: true,
- icons: {
- clear: "fa fa-delete",
- close: "fa fa-check primary",
- date: "fa fa-calendar",
- down: "fa fa-chevron-down",
- next: "fa fa-chevron-right",
- previous: "fa fa-chevron-left",
- time: "fa fa-clock-o",
- today: "fa fa-calendar-check-o",
- up: "fa fa-chevron-up",
- },
- inputId: "",
- maxDate: DateTime.fromObject({ year: 9999, month: 12, day: 31 }),
- minDate: DateTime.fromObject({ year: 1000 }),
- useCurrent: false,
- widgetParent: "body",
- onInput: () => {},
- onUpdateInput: () => {},
-};
-DatePicker.props = {
- // Components props
- onDateTimeChanged: Function,
- date: { type: [DateTime, { value: false }], optional: true },
- warn_future: { type: Boolean, optional: true },
- // Bootstrap datepicker options
- buttons: {
- type: Object,
- shape: {
- showClear: Boolean,
- showClose: Boolean,
- showToday: Boolean,
- },
- optional: true,
- },
- calendarWeeks: { type: Boolean, optional: true },
- format: { type: String, optional: true },
- icons: {
- type: Object,
- shape: {
- clear: String,
- close: String,
- date: String,
- down: String,
- next: String,
- previous: String,
- time: String,
- today: String,
- up: String,
- },
- optional: true,
- },
- inputId: { type: String, optional: true },
- keyBinds: { validate: (kb) => typeof kb === "object" || kb === null, optional: true },
- locale: { type: String, optional: true },
- maxDate: { type: DateTime, optional: true },
- minDate: { type: DateTime, optional: true },
- readonly: { type: Boolean, optional: true },
- useCurrent: { type: Boolean, optional: true },
- widgetParent: { type: String, optional: true },
- daysOfWeekDisabled: { type: Array, optional: true },
- placeholder: { type: String, optional: true },
- onInput: { type: Function, optional: true },
- onUpdateInput: { type: Function, optional: true },
-};
-DatePicker.template = "web.DatePicker";
-
-/**
- * Date/time picker
- *
- * Similar to the DatePicker component, adding the handling of more specific
- * time values: hour-minute-second.
- *
- * Once again, refer to the tempusdominus documentation for implementation
- * details.
- * @extends DatePicker
- */
-export class DateTimePicker extends DatePicker {
- /**
- * @override
- */
- initFormat() {
- this.defaultFormat = localization.dateTimeFormat;
- this.staticFormat = "yyyy/MM/dd HH:mm:ss";
- this.formatValue = wrapError(formatDateTime);
- this.parseValue = wrapError(parseDateTime);
- this.isLocal = true;
- }
-}
-
-DateTimePicker.defaultProps = {
- ...DatePicker.defaultProps,
- buttons: {
- showClear: false,
- showClose: true,
- showToday: false,
- },
-};
diff --git a/addons/web/static/src/core/datepicker/datepicker.xml b/addons/web/static/src/core/datepicker/datepicker.xml
deleted file mode 100644
index 99a82e6924c..00000000000
--- a/addons/web/static/src/core/datepicker/datepicker.xml
+++ /dev/null
@@ -1,29 +0,0 @@
-
-