Development Book V17: OWL field

In this instance, we will create a new widget and add it to a form view. We are currently developing a date picker widget that allows us to enter several dates at once. We can now proceed with the creation of a widget.

In this case, the res.partner model is getting a new char field added.

from odoo import fields, models
                        class ResPartner(models.Model):
                           _inherit = 'res.partner'
                           test_field = fields.Char()

Add the field in the form view.

                            <field name="test_field" widget="multiple_datepicker"/>

Next, we define the Qweb template for the field widget

<?xml version="1.0" encoding="UTF-8"?>
                           <t t-name="DatePickerField" owl="1">
                               <input type="text"
                                      class="input_datepicker o-autocomplete--input o_input"
                                      t-on-click="(ev) => this._onSelectDateField(ev)"/>

Next, we are going to add the style for the widget.

.datepicker-dropdown {
                           top: 0;
                           left: 0;
                           padding: 4px
                        .datepicker table tr td,
                        .datepicker table tr th {
                           text-align: center;
                           width: 30px;
                           height: 30px;
                           border: none
.datepicker table tr,
.datepicker table tr td.focused {
   background: #eee;
   cursor: pointer;
   border-radius: 18px;
.datepicker table tr,
.datepicker table tr,
.datepicker table tr,
.datepicker table tr {
   color: #fff;
   background-color: #7C7BAD;
   border-color: #7C7BAD;
.datepicker table tr td span {
   display: block;
   width: 23%;
   height: 54px;
   line-height: 54px;
   float: left;
   margin: 1%;
   cursor: pointer;
.datepicker table tr td,
.datepicker table tr td,
.datepicker table tr td,
.datepicker table tr td {
   color: #fff;
   background-color: #7C7BAD;
   border-color: #2e6da4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
.datepicker .datepicker-switch {
   width: 145px;
.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker tfoot tr th {
   cursor: pointer;


Next we need to define the widget component

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { useInputField } from "@web/views/fields/input_field_hook";
import { Component,useRef } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
export class DatePickerField extends Component {
   static template = 'DatePickerField'
   setup() {
       this.input = useRef("inputdate");
           getValue: () =>[] || "",
           refName: "inputdate"
   _onSelectDateField(ev) {
       var dateFormat = "MM/DD/YYYY";
       dateFormat = dateFormat.toLowerCase()
       if (this.input.el) {
           if (this.input.el.value) {
                   []: this.input.el.value
               multidate: true,
               format: dateFormat,
DatePickerField.props = {
export const datepickerField = {
   component: DatePickerField,
   supportedTypes: ["char"],
registry.category("fields").add("multiple_datepicker", datepickerField);

Then define the js, xml and css in the manifest file.

'assets': {
   'web.assets_backend': [

Next we can select the multiple dates in the field.


Thus we can add multiple dates using the DatePicker Widget.



Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635



Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.



Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message