Odoo 16网站模块日期格式修改求助（mm-dd-yyyy转dd-mm-yyyy）

问题根源 #

你当前使用的是原生HTML <input type="date"> 控件，这类控件的日期格式由浏览器默认控制，Odoo的t-options配置对原生date输入不生效。另外，Odoo网站模块的前端交互依赖自身Web组件库，直接操作原生控件会和Odoo内部逻辑冲突。

解决方案步骤 #

1. 替换原生日期控件为Odoo Web DatePicker组件 #

修改XML代码，使用Odoo内置的日期选择器组件，它会遵循自定义的dateFormat配置：

<tr>
    <td><label class="col-form-label" for="checkIn">Check-in Date</label></td>
    <td>
        <div class="o_datepicker">
            <input id="request_checkIn" type="text" name="checkIn" 
                t-att-data-date-format="'dd-mm-yyyy'" 
                class="form-control o_datepicker_input"/>
        </div>
        <input id="request_checkInTime" type="time" class="form-control"/>
    </td>
    <td><label class="col-form-label" for="checkOut">Check-out Date</label></td>
    <td>
        <div class="o_datepicker">
            <input id="request_checkOut" type="text" name="checkOut" 
                t-att-data-date-format="'dd-mm-yyyy'" 
                class="form-control o_datepicker_input"/>
        </div>
        <input id="request_checkOutTime" type="time" class="form-control"/>
    </td>
</tr>

2. 调整JavaScript脚本适配Odoo组件 #

Odoo的DatePicker基于jQuery UI实现，需要用对应方式初始化和操作，修改JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
    // 初始化Odoo日期选择器
    const initDatePickers = () => {
        const dateInputs = document.querySelectorAll('.o_datepicker_input');
        dateInputs.forEach(input => {
            const dateFormat = input.dataset.dateFormat;
            $(input).datepicker({
                dateFormat: dateFormat,
                minDate: 0, // 限制最小日期为今天
                onSelect: function(selectedDate) {
                    if (this.id === 'request_checkIn') {
                        // 更新退房日期的最小限制
                        $('#request_checkOut').datepicker('option', 'minDate', selectedDate);
                    }
                }
            });
        });
    };

    // 初始化日期选择器
    initDatePickers();

    // 获取时间输入控件
    const request_checkInTime = document.getElementById('request_checkInTime');
    const request_checkOutTime = document.getElementById('request_checkOutTime');

    // 退房时间验证
    request_checkOutTime.addEventListener('input', function() {
        const checkInDate = $('#request_checkIn').datepicker('getDate');
        const checkOutDate = $('#request_checkOut').datepicker('getDate');
        
        // 日期相同时验证时间
        if (checkInDate && checkOutDate && checkInDate.getTime() === checkOutDate.getTime()) {
            if (this.value <= request_checkInTime.value) {
                alert('退房时间必须晚于入住时间');
                this.value = request_checkInTime.value;
            }
        }
    });
});

3. 确保依赖加载（可选） #

如果页面未自动加载jQuery UI相关资源，在XML中添加依赖：

<template id="assets_frontend" inherit_id="website.assets_frontend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/web/static/lib/jquery_ui/ui/datepicker.js"/>
        <link rel="stylesheet" href="/web/static/lib/jquery_ui/themes/base/datepicker.css"/>
    </xpath>
</template>

关键说明 #

• 原生<input type="date">的value始终为ISO格式（YYYY-MM-DD），无法通过前端配置修改显示格式，必须使用Odoo DatePicker组件才能自定义显示样式。
• Odoo DatePicker基于jQuery UI，需用jQuery方法处理控件的取值、赋值和配置修改，不能直接用原生DOM操作。

内容的提问来源于stack exchange，提问作者Fahrina Rashid