Timer Widget

In your module's __manifest__.py, add timer_widget to dependencies:

{
    'name': 'My Module',
    'depends': ['base', 'timer_widget'],
    ...
}

Import the Timer component in your JavaScript file:

/** @odoo-module **/

import { Timer } from "@timer_widget/js/timer_widget";

class MyField extends Component {
    static components = { Timer };
    ...
}

Add the Timer component to your XML template:

<!-- Basic usage (seconds only) -->
<Timer value="duration" ongoing="isRunning" />

<!-- With milliseconds -->
<Timer value="duration" ongoing="isRunning" showMilliseconds="true" />

• value (Number, required): Duration in seconds
• ongoing (Boolean, optional): Whether timer is running (default: false)
• showMilliseconds (Boolean, optional): Show milliseconds format (default: false)

Here's a complete example showing how to create a custom field widget using the Timer component:

duration = fields.Float('Duration (seconds)')
is_running = fields.Boolean('Running')
start_time = fields.Datetime('Start Time')

def get_duration(self):
    """Get current duration including running time"""
    self.ensure_one()
    duration = self.duration
    if self.is_running and self.start_time:
        delta = fields.Datetime.now() - self.start_time
        duration += delta.total_seconds()
    return int(duration)

import { Timer } from "@timer_widget/js/timer_widget";

class MyTimerField extends Component {
    static components = { Timer };
    
    setup() {
        this.orm = useService("orm");
        this.duration = 0;
        
        useRecordObserver(async (record) => {
            if (record.data.is_running) {
                this.duration = await this.orm.call(
                    "my.model", "get_duration", [record.resId]
                );
            } else {
                this.duration = Math.floor(record.data.duration);
            }
        });
    }
    
    get ongoing() {
        return this.props.record.data.is_running;
    }
}

<t t-name="my_module.MyTimerField">
    <Timer value="duration" ongoing="ongoing" />
</t>