how to customize grails 4 date picker?

I am using grails datepicker in my form to generate date field

<g:datePicker name="published"></g:datePicker>

It generates the field in multi fields format as shown below.

I need the format as shown below. I was wondering whether there is a way to customize the datepicker so that the following multi fields format can be achieved. I couldn't find customization in the docs of datepicker.

The grails version i am using is 4.0.10. I appreciate any guide. Thanks!

I asked your same question before. This is not exactly what you want. This is what I did in my project. Hope you can make the changes that fit yours.

You need to override the Field plugin template and manually process the textboxes that are being POST back to your controller.

The document is in this page. https://grails3-plugins.github.io/fields/snapshot/guide/customizingFieldRendering.html

You need to create a folder structure in the Views folder that matches your variable (either by name or by type).

In my case, I want to override the HTML whenever I have a Date variable shown on any of my views. So, I add these folders and this gsp file in my project path.

views/_fields/date/_wrapper.gsp

These folder structure says that whenever I have a Date field in any of my domain classes, it will use my HTML instead.

This is the HTML in my _wrapper.gsp file. I have a textbox called datepicker.

<input type="text" name="datepicker" id="datepicker" value="<g:formatDate date="${value}" format="MM/dd/yyyy"/>"></div>

I am using the datepicker from jquery-ui. So, I also add this javascript to my view.

  $( function() {
    $( "#datepicker" ).datepicker();
  } );

After these, where ever the Field plugin that sees a Date field, it will pop up the jquery-ui datepicker when I click the textbox.