Replace grails datepicker with jquery-ui datepicker - grails

Question

I am using Grails 4. My book domain has a date field called publishDate. I use <f:all bean="book"/> in my edit view to display the input fields. The Fields plugin displays 3 dropdown boxes with the day, month, and year in the html for the date field in the book.
Would you teach me how to replace the Grails Datepicker with the jQuery UI datepicker please?
Thanks!

Answer 1

If the old community plugins were still up, you could search through their code for your solution. Since Grails no longer supports its community, you can try looking through github for an older plugin. This would be your quickest solution.

Answer 2

In case this is helpful to you or anyone else who comes across this issue: what we have done is create our own tag to accomplish this. You'll have to adjust it a bit to make it work for you, and include the necessary assets from jquery ui, but the tag is something like:
/*
* Render an input field that includes a calendar popup.
*/
def dateField = { attrs ->
if (!attrs.id) {
out << "'id' is a required attribute."
return
}
def additionalKeys = attrs.keySet() - ['id','name','value','className']
def passthroughAttrs =""
additionalKeys.each{key->
passthroughAttrs += "${key}='${attrs[key]}' "
}
out << "<input type='text' class='calendarField ${attrs.className ?: ''}' id='${attrs.id}' name='${attrs.name ?: attrs.id}' value='${attrs.value ?: ''}' autocomplete='off' "
out << "onfocus=\"jQuery(this).datepicker().datepicker('show');\" "
out << "$passthroughAttrs/>"
out << "<img id='cal_${attrs.id}' class='calendarIcon' alt='Show Calendar' title='Show Calendar' src='${assetPath(src: 'calendar.png')}' "
out << "onclick=\"jQuery('#${attrs.id}').focus();\"/>"
}
Usage is something like:
<ns:dateField id="someUniqueID" name="fieldName" />

Answer 3

As stated by Daniel you can write you own tag and that is something that I have done as well. I would also like to note that the html input tag has a date type.
<input type="date" id="some-id">
That has worked for me instead of doing all the work of creating a new tag.
The downside (in my opinion) to the html input is that some of the functions do not have complete browser support (min, max). At least they were not working for me. Also if you use the jQuery ui in some spots and the html in others, the data is submitted differently on the post request.
The input tag would give you something like yyyy-mm-dd
while the jQuery gives you something like mm-dd-yyyy.