Replace grails datepicker with jquery-ui datepicker

user_14470184 0
Viewed 118

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!

datepicker grails
3 Answers

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.

user_29367780

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" />
user_81841120

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.

user_109242390
Related