+
+
+
+
+
+
+
diff --git a/field_timepicker/static/src/css/time_widget.css b/field_timepicker/static/src/css/time_widget.css
new file mode 100644
index 000000000..20dc12ba0
--- /dev/null
+++ b/field_timepicker/static/src/css/time_widget.css
@@ -0,0 +1,48 @@
+.time-picker-container {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 10px;
+ background-color: white;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ width: 250px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+}
+
+.time-box-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 5px;
+}
+
+.time-box-button {
+ padding: 5px 10px;
+ margin: 2px 0;
+ background-color: #ddd;
+ border: none;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.time-box-display {
+ font-size: 18px;
+ padding: 5px;
+ background-color: #f9f9f9;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ min-width: 30px;
+ text-align: center;
+}
+
+.time-picker-confirm-button {
+ margin-top: 10px;
+ padding: 5px 15px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
diff --git a/field_timepicker/static/src/js/time_widget.js b/field_timepicker/static/src/js/time_widget.js
new file mode 100644
index 000000000..d4e0a6eec
--- /dev/null
+++ b/field_timepicker/static/src/js/time_widget.js
@@ -0,0 +1,110 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import { useInputField } from "@web/views/fields/input_field_hook";
+const { Component, useRef, onMounted } = owl;
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { _t } from "@web/core/l10n/translation";
+
+/**
+ * Define this module for the function of creating a time picker widget
+ */
+export class FieldTimePicker extends Component {
+ static template = 'FieldTimePicker';
+
+ setup() {
+ this.input = useRef('input_time');
+ // Ensure the element is accessible after the component is mounted
+ onMounted(() => {
+ if (!this.input.el) {
+ console.error("Input element is not available.");
+ }
+ });
+ useInputField({
+ getValue: () => this.props.record.data[this.props.name] || "",
+ refName: "input_time"
+ });
+ }
+ /**
+ * Function to open a time picker and set the time.
+ */
+ _onClickTimeField(ev) {
+ const timePicker = this.input.el;
+ if (!timePicker) {
+ console.error("Input element is not available.");
+ return;
+ }
+ if (this.props.record.fields[this.props.name].type === "char" && timePicker) {
+ const currentTime = timePicker.value || "00:00:00";
+ const [hour, minute, second] = currentTime.split(':').map(Number);
+ // Create a container for the time picker near the input field
+ const timePickerContainer = document.createElement("div");
+ timePickerContainer.className = "time-picker-container";
+ document.body.appendChild(timePickerContainer);
+ // Position the time picker container relative to the input field
+ const rect = timePicker.getBoundingClientRect();
+ timePickerContainer.style.position = "absolute";
+ timePickerContainer.style.top = `${rect.bottom + window.scrollY}px`;
+ timePickerContainer.style.left = `${rect.left + window.scrollX}px`;
+ const createTimeBox = (label, value, max) => {
+ const wrapper = document.createElement("div");
+ wrapper.className = "time-box-wrapper";
+ const incrementButton = document.createElement("button");
+ incrementButton.textContent = "+";
+ incrementButton.className = "time-box-button";
+ wrapper.appendChild(incrementButton);
+ const display = document.createElement("div");
+ display.textContent = value < 10 ? `0${value}` : value;
+ display.className = "time-box-display";
+ wrapper.appendChild(display);
+ const decrementButton = document.createElement("button");
+ decrementButton.textContent = "-";
+ decrementButton.className = "time-box-button";
+ wrapper.appendChild(decrementButton);
+ incrementButton.addEventListener("click", () => {
+ let newValue = (parseInt(display.textContent, 10) + 1) % (max + 1);
+ display.textContent = newValue < 10 ? `0${newValue}` : newValue;
+ });
+ decrementButton.addEventListener("click", () => {
+ let newValue = (parseInt(display.textContent, 10) - 1 + (max + 1)) % (max + 1);
+ display.textContent = newValue < 10 ? `0${newValue}` : newValue;
+ });
+ return wrapper;
+ };
+ const hourBox = createTimeBox("Hour", hour, 23);
+ const minuteBox = createTimeBox("Minute", minute, 59);
+ const secondBox = createTimeBox("Second", second, 59);
+ timePickerContainer.appendChild(hourBox);
+ timePickerContainer.appendChild(minuteBox);
+ timePickerContainer.appendChild(secondBox);
+ const confirmButton = document.createElement("button");
+ confirmButton.textContent = _t("Set Time");
+ confirmButton.className = "time-picker-confirm-button";
+ timePickerContainer.appendChild(confirmButton);
+ confirmButton.addEventListener("click", () => {
+ if (this.input?.el) {
+ const selectedTime = `${hourBox.querySelector('.time-box-display').textContent}:${minuteBox.querySelector('.time-box-display').textContent}:${secondBox.querySelector('.time-box-display').textContent}`;
+ this.input.el.value = selectedTime;
+ this.props.record.update({
+ [this.props.name]: selectedTime
+ });
+ document.body.removeChild(timePickerContainer);
+ } else {
+ document.body.removeChild(timePickerContainer);
+ }
+ });
+ } else {
+ this.env.model.dialog.add(AlertDialog, {
+ body: _t("This widget can only be added to 'Char' field"),
+ });
+ }
+ }
+}
+FieldTimePicker.props = {
+ ...standardFieldProps,
+};
+export const TimePickerField = {
+ component: FieldTimePicker,
+ supportedTypes: ["char"],
+};
+registry.category("fields").add("timepicker", TimePickerField);
\ No newline at end of file
diff --git a/field_timepicker/static/src/xml/timepicker_templates.xml b/field_timepicker/static/src/xml/timepicker_templates.xml
new file mode 100644
index 000000000..319e2f978
--- /dev/null
+++ b/field_timepicker/static/src/xml/timepicker_templates.xml
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add Time Picker Widget That Can Be Used With Character Type + Fields In Odoo. +
+Field Time Picker +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Easy to Input Time Values Using a Picker +
++ More convenient to input time values using a picker. +
+
+
+
+
+
+
+
+
+ + Select Time Values Accurately +
++ Users can select time values accurately from the picker. +
+
+
+
+
+
+
+
+
+
+ + Compatibility +
++ Designed to work with both Odoo Community and Enterprise editions. +
+
+
+
+
+
+
+
+
+
+ Field Time Picker
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Configuration + +
+
+
+ + Just add widget='timepicker' to character + field. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Time picker +
+
+
+ + You will get time picker like this. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Validation + +
+
+
+ + If its not Char field this Popup will + appear. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + You will get a + timepicker for the character fields in odoo. +
+
+
+
+
+
+
+
+
+
+ + Available in Odoo 18.0 Community, Enterprise and Odoo.sh
+
+
+
+
+
+
+
+
+
+ + Time picker is + in 24-hour format, and also you will get + seconds.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + It allows users to easily select and input time values in Odoo fields. +
+
+
+
+
+
+
+ + It works with any Odoo field that requires time input. +
+
+
+
+
+
+ + No, it is specifically for selecting time only. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 04th Jan, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+