Grails 4如何将默认日期选择器替换为jQuery UI datepicker

1. 引入jQuery与jQuery UI依赖 #

在项目公共布局文件（如grails-app/views/layouts/main.gsp）的<head>标签内引入对应资源，确保jQuery加载顺序早于jQuery UI，同时引入jQuery UI的样式文件。如果使用Asset-Pipeline插件，可将资源放置在grails-app/assets/javascripts和grails-app/assets/stylesheets目录后通过资源标签引入。

2. 自定义Fields插件日期字段渲染模板 #

Fields插件支持通过自定义模板覆盖默认渲染逻辑，分为全局生效和单字段生效两种方式：

• 全局生效（所有Date类型字段都使用jQuery UI Datepicker）：创建路径为grails-app/views/_fields/date/_widget.gsp的模板文件
• 仅对Book类的publishDate字段生效：创建路径为grails-app/views/_fields/book/publishDate/_widget.gsp的模板文件

在模板文件中写入以下内容：

<g:if test="${value}">
    <g:set var="formattedDate" value="${g.formatDate(date: value, format: 'yyyy-MM-dd')}"/>
</g:if>
<input type="text" 
       id="${property}" 
       name="${property}" 
       class="datepicker"
       value="${formattedDate ?: ''}"
/>

3. 初始化jQuery UI Datepicker #

在布局文件的底部或者当前编辑视图的末尾添加初始化脚本：

<script>
$(function() {
    $(".datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        changeYear: true,
        changeMonth: true
        // 可根据需要添加其他配置项
    });
});
</script>

配置项中的dateFormat需要和你模板中日期格式化的格式保持一致，避免后端绑定失败。

4. 配置后端日期绑定规则 #

在grails-app/conf/application.yml中添加日期绑定格式配置，确保Spring可以正确将前端传入的日期字符串转换为Date类型：

grails:
    databinding:
        dateFormats:
            - yyyy-MM-dd
            - yyyy-MM-dd HH:mm:ss

完成以上步骤后，<f:all bean="book"/>渲染publishDate字段时就会自动使用jQuery UI Datepicker，不再生成默认的三个下拉选择框。 #

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